vuex 模块化使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fgg9655/article/details/88546738

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

猜你喜欢

转载自blog.csdn.net/fgg9655/article/details/88546738