深入理解vuex2.0 之 modules
什么是module？背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。 module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。 怎么用module？一般结构 const store = new Vuex.Store({
modules: { a: moduleA,b: moduleB}) 模块内部的数据：①内部state，模块内部的state是局部的，也就是模块私有的，比如是car.js模块state中的list数据，我们要通过this.$store.state.car.list获取；②内部getter、mutation和action，仍然注册在全局命名空间内，这是为了多模块可以同时响应同一mutation；this.$store.state.car.carGetter的结结果是undefined，而通过this.$store.state.carGetter则可以拿到。 传参：getters====({state(局部状态),getters（全局getters对象）,roosState（根状态）})；actions====({state(局部状态),commit,roosState（根状态）}). 新建一个项目体验一下，通过vue –cli新建一个项目vuemodule,不要忘记安装vuex. 1,在src 目录下新一个login文件夹，在里面新建index.js 用于存放login 模块的状态。 为了简单起见，我把模块下的state,actions,mutations,getters 全放在index.js文件中。 先简单给它增加一个状态，userName: “sam” };
const actions = { }; }; // 不要忘记把state,mutations等暴露出去。 2，在src 目录下，再新建一个 store.js 这是根store,它通过modules 属性引入 login模块。 Vue.use(Vuex);
// 引入login 模块 export default new Vuex.Store({ 3,在main.js中引入store,并注入到vue 根实例中。 // 引入store
import store from "./store" new Vue({ 4，在 app.vue 中通过computed属性获取到login下的state. 这里要注意，在没有modules 的情况下，组件中通过 this.$store.state.属性名 可以获取到，但是有modules 之后，state 被限制到login 的命名空间（模块）下，所以属性名前面必须加模块名（命名空间），组件中通过 this.$store.state.模块名.属性名，在这里是 this.$store.state.login.userName {{useName}}
组件中成功获取到状态。项目目录和展示如下 4 ，通过actions,mutations 改变名字， 这就涉及到dispatch action,commit mutations,mutations 改变state. 先在login 文件夹 index.js中添加changeName action 和 CHANGE_NAME mutations. const actions = {
changeName ({commit},anotherName) { commit("CHANGE_NAME",anotherName) } }; 在app.vue 中添加一个按钮：， 点击时，dispatch 一个 action. 那在组件中怎么dispatch actions 呢？ 在模块中，state 是被限制到模块的命名空间下，需要命名空间才能访问。 但actions 和mutations,其实还有 getters 却没有被限制，在默认情况下，它们是注册到全局命名空间下的，所谓的注册到全局命名空间下，其实就是我们访问它们的方式和原来没有module 的时候是一样的。比如没有module 的时候，this.$store.dispatch(“actions”),现在有了modules,actions 也写在了module 下面（changeName 写到了login目录下的index.js中），我们仍然可以这么写，this.$store.dispatch(“changeName”)， 组件中的getters,也是通过 this.$store.getters.module中getters 来获取。 {{useName}}
6,其实actions,也可以限定在当前模块的命名空间中。只要给我们的模块加一个namespaced 属性： 当所有的actions,getters 都被限定到模块的命名空间下，我们dispatch actions,commit mutations 都需要用到命名空间。如 dispacth("changeName"),就要变成 dispatch("login/changeName"); getters.localJobTitle 就要变成 getters["login/localJobTitle"] app.vue 如下： {{localJobTitle}}有了命名空间之后，mapState,mapGetters,mapActions 函数也都有了一个参数，用于限定命名空间，每二个参数对象或数组中的属性，都映射到了当前命名空间中。
import {mapActions,mapGetters} from "vuex";
export default {
computed: {
// 对象中的state 和数组中的localJobTitle 都是和login中的参数一一对应。
...mapState("login",...mapGetters("login",["localJobTitle"])
},...mapActions('login',['alertName'])
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |