When we use Nuxt and Vuex Store, will the values be shared between different pages?-CodePudding

We want to share values between different pages. We tried it in the following ways.

On the same page, State returned the correct value, but on different pages, State was not set. Are we doing something wrong? Or is Vuex Store not able to share values between pages?

We have replaced them with simplified codes for this question. The codes that are causing the problem are more complex.

/store/index.js

const NOT_SET = null

export const state = () => ({
  value: NOT_SET,
})

export const mutations = {
  setValue(state, value) {
    state.value = value
  },
}

/pages/index.vue

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['value']),
  },
  mounted() {
    this.setValue(100)
  },
  methods: {
    ...mapMutations(['setValue']),
  },
}
</script>

/pages/_XXX/index.vue

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['value']),
  },
}
</script>

CodePudding user response：

You cannot use a tags because those will wipe the whole SPA each time. If you're in a Vue context, you need to use the Vue router, hence nuxt-link is mandatory if you want to keep the app during the whole time.

It will also greatly improve the performance of the whole website.

Because otherwise, Vuex is totally able to share the state across all the page. It's meant to share it a cross the whole Vue app in fact.