阅读 220

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

前言

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 会收到局部化的 getterdispatchcommit。换言之,你在使用模块内容(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划分,方便以后的扩展。


作者:jy白了个白
链接:https://juejin.cn/post/7028739292725772318


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐