As we mentioned in the previous section, Vuex stores are reactive, but if we want to access the reactive value in the view, we should use the computed property instead of the data method, as follows:
// vuex-sfc/state/basic/src/app.vue
<p>{{ number }}</p>
import Vue from 'vue/dist/vue.js'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: { number: 1 }
})
export default {
computed: {
number () {
return store.state.number
}
}
}
So now, the number field in the <template> block is reactive and the computed property will re-evaluate and update the DOM whenever store.state.number changes. But this pattern causes a coupling issue and is against the extracting idea of Vuex. So, let's refactor the preceding code with the following steps:
- Extract the store to the root component:
// vuex-sfc/state/inject/src/entry.js
import Vue from 'vue/dist/vue.js'
import App from './app.vue...