1.在src下创建 store 文件夹  

内容有:vuex 模块化使用

2.index.js为总的引用文件  ,  引入 modules文件下各个模块 并暴露出去

vuex 模块化使用

在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 对象,你可以以属性的形式访问这些值

vuex 模块化使用

vuex 模块化使用

这样就可以在外部直接愉快的  this.xxxx调用了

4.modules

这个文件夹 就是专门存放  各个不同模块的'小仓库'

基本结构为

vuex 模块化使用

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 可以包含任意异步操作。  
  • 像异步的请求啥玩意的就可以写里面

 

相关文章: