Vue项目搭建与开发(六): Vuex 之modules详解

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

前言

Vuex中使用的是单一状态树,用一个对象就包含了全部的应用层级状态，
应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

modules使用

首先在src/store文件夹下新建一个modules文件夹,在这下面我们可以新建我们不同模块的状态处理文件，这里我新建了一个user.js、cart.js2个模块状态文件，如下

2个文件的内容定义如下

cart.js

const state = {    
product: 'this is list'
}
const mutations = {    getProductList (state) {       
 return state.product  
  }}
const actions = {   
 getProductList ({ commit },payload) {       
 // 变更状态      
  commit('getProductList',payload)  
  }}
const getters = {  
  getProductList (state) {  
      return state.product  
  }}
export default {namespaced:true,state, mutations, actions, getters}

user.js
const state = {  
  token: 'abcde'
}

const mutations = {   

setToken (state,name) {    state.token=name;}
}

const actions = {    
    // getToken (context) {  
  //     context.commit('getToken')  
  // },  
  changeToken ({ commit },payload) {   
 // 变更状态    commit('setToken',payload)
}
}
const getters = {    
    getToken (state) {      
      return state.token 
   }}
export default {namespaced:true,state, mutations, actions, getters}

接着在我们store目录下的index.js导入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import cart from './modules/cart'
//挂载
VuexVue.use(Vuex)

//创建VueX 对象
const store = new Vuex.Store({
state:{
//存放的键值对就是所要管理的状态
name:'Hello VueX',permission:[],
},
getters: {changeName: state => {
    return state.name.substring(0,5)
 }
},
mutations: {changeNewName (state,name) {
// 变更状态
state.name="Hello Friend "+name}
},
actions:{changeNewName ({ commit },payload) 
{// 变更状态commit('changeNewName',payload)}},
modules:{user,cart}
})
export default store

分别import 进来，然后在store实例里加入modules字段，加入我们导入的模块。

通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

这样如果两个模块有同名的方法或数据就可以用模块名来区分。

官方也说道：

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码。

这是一个很实用的技巧和功能。

在对应组件中使用

computed:{  
...mapState({  token: state => state.user.token,}), 
// ...mapGetters("模块名",[  //   '方法名'  // ]), 
 ...mapGetters('user',{    getToken:'getToken'  })
},
methods:{
    ...mapActions({  changeToken:"user/changeToken"}),
}

其中当我们使用的时候还可以直接使用

let s=  this.$store.getters["user/getToken"]

这里可以直接获取到我们的getToken的所返回的值。

接着通过

this.$store.dispatch("user/changeToken","我来了的token")

这样可以改变我们的state数据状态。this.$store.dispatch异步操作出发的是commit，然后commmit在提交mutations里的方法。

这里也可以直接使用this.changeToken（‘新token'）来达到一样的效果。

总结

1.modules这个模块划分对于业务较多的项目是一个比较合适的选项，非常适合，避免项目state数据状态太杂了。

2.通过上述，我们以后在项目中，建议都先加上modules划分，方便以后的扩展。