Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens new
window))”而存在。这也意味着,每个应用将仅仅包含一个 store
实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
1. Vuex起步
安装Vuex,由于笔者仍然使用vue2,故在安装时:
npm i vuex@^3.0.0 -s
创建store.js:
import Vuex from 'vuex'
import Vue from "vue";
Vue.use(Vuex)
// const store = new Vuex.Store({
// state: {
// count: 0
// },
// mutations: {
// updateCount (state, num) {
// state.count = num
// }
// }
// })
//
// export default store
//当使用服务端渲染的时候,防止内存溢出,
// 返回一个store的工厂函数,每当一个请求发起,
// 我们就创建一个store,当请求关闭,创建的store也被销毁。
export default () => {
return new Vuex.Store({
state: {
count: 0
},
mutations: {
updateCount (state, num) {
state.count = num
}
}
})
}
如果返回的是一个创建store的工厂函数,那么我们在main.js中就应该:
...
import createRouter from './router/router.js'
let store = createStore()
...
new Vue({
el:'#app',
store,
render:(h)=>h(App)
})
...
store具有一个state属性,state是一个对象,其中就是我们存储的数据。现在,我们在state中初始化了一个名为count的变量,其值为1。
我们如何在组件中使用count呢?
App.vue:
mounted() {
console.log(this.$store.state.count);
}
我们可以在控制台看见输出了0。
如果我们想更改count的值呢?
mounted() {