1.在src下创建 store 文件夹
内容有:
2.index.js为总的引用文件 , 引入 modules文件下各个模块 并暴露出去
在main.js中引入
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App),
mounted() {
this.$store.dispatch('setDictMap')
}
})
即可使用.
3.getters.js
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数。
Getter 会暴露为 store.getters
对象,你可以以属性的形式访问这些值
这样就可以在外部直接愉快的 this.xxxx调用了
4.modules
这个文件夹 就是专门存放 各个不同模块的'小仓库'
基本结构为
state 为定义静态数据的地方
mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。第二个属性为外部传入的值
提交载荷(Payload)
你可以向 store.commit
传入额外的参数,即 mutation 的 载荷(payload):
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)
action
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit
提交一个 mutation,或者通过 context.state
和 context.getters
来获取 state 和 getters。
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
- 像异步的请求啥玩意的就可以写里面