vuex总结

199 阅读1分钟

总结vuex的具体用法(modules)

image.png

说明:

1.把modules里面的inner.js文件引入到index.js里面

2.在index.js里面的modules对象中引入inner.js

3.const store ,然后export default 导出去,在main.js中 import store from './store'导入store这个文件

image.png

说明:

1.actions:里面的方法 也可以直接把{commit}这个方法解构出来,直接 commit('UP_DATUSER',payload)这种方式

image.png

说明:

1.在页面中 引用inner.js中的state中的变量 要用:$store.state.inner.user...这种方式

2.在methods中调用方法 也是通过inner/...这种方式去调用 (文件名/方法名)

mapState,mapGetters,mapActions,mapMutations用法

1.mapState与mapGetters用法类似

image.png

说明:

1).将mapState从vuex中解构出来,这样在组件中就可以直接用mapState辅助函数了

2).mapState 要在computed对象中使用,使用的时候就是this.xxx

3).把modules中的模块名‘inner’放在前面,变量名放在数组里面

2.mapMutations与mapActions用法类似

image.png

说明:

1.在methods里面引入mapMutations,直接在方法中 用this.xxx来使用