Vuex modular management

If your project is a small one, there is no need to use modularity;

However, if the project you are participating in is a medium to large project, then Vuex modularization is essential, otherwise the entire file will be bloated and difficult to manage.

Through modular management: each module has its own state and methods, and each module manages its own data, so it is not easy to cause confusion.

Step 1: Install Vuex

Installation method one:

If you are using the vue create xxx method to create a project, then if you check vuex when you create it, it will automatically download and install it for you.

Installation method two:
npm install vuex@next --save
or
yarn add vuex@next --save
But when downloading manually in the second step, you need to import and mount it in main.js

Step 2: Create the modules folder in the store folder

Step 3: Create the module js file you need in the store/modules folder

Step 4: Create the internal structure of the module

Step 5: Import each module into the root directory store/index.js file and mount it

(As long as the module is mounted to the root directory, it is mounted globally by default, unless you enable the namespace namespaced: true )

Step 6: Get started

1. Access state data

①We directly call the state of index.js in the root directory:
console.log(this.$store.state)
②Use mapping method
import {  mapGetters, mapState, mapMutations, mapActions } from 'vuex';
...mapGetters(['rootGetters01']),
③: Access data under a certain module through mapping method
...mapState('user',['userInfo','numberArr'])
user: is the module name, userInfo and numberArr are all state attributes under the user module (the prerequisite for accessing the attributes in a certain module is that they each have their own namespace enabled )

2. Trigger mutations

Method ①:

Page content

<el-button type="primary" size="small" @click="updateName">更新名称</el-button>

updateName(){//更新姓名（user模块）
            //$store.commit('模块名/mutation名',额外参数)
            this.$store.commit('user/setName','回流生')
        },

user module content

const state = {
    userInfo:{
        name:'文龙刚',
        job:'前端开发工程师',
        age:'18'
    },
}

const mutations={
    setName(state,Newname){//更新名字
        state.userInfo.name = Newname
    },
}

Method ②: Method of triggering mapping under module

...mapMutations('user',['addUserArr']),

...mapMutations('模块名',['方法名']),

Method ③: Use tags directly and pass parameters

<el-button type="primary" size="small" @click="setUserSecond('56')">使用模块映射方法并传参</el-button>

There is also a trigger actions method, which is consistent with the above mutations usage, but the actions trigger method is

this.$store.dispatch('模块名/模块中的方法','参数')

The following is the specific code, which can be run to see the corresponding effect.

//  store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
//导入模块
import user from './modules/user'
import setting from './modules/setting'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:'我是根目录下index的state值',
    rootArray:['1','2','3','4','5','6'],//根目录下rootArray值
  },
  getters: {
    rootGetters01(state){
      return state.rootArray
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {//挂载模块
    user,
    setting
  }
})

//    store/modules/user.js

//用户模块
const state = {
    userInfo:{
        name:'文龙刚',
        job:'前端开发工程师',
        age:'18'
    },
    list:[
        {goods:'苹果',system:'IOS',price:'8590'},
        {goods:'华为',system:'鸿蒙',price:'7500'},
        {goods:'vivo',system:'安卓',price:'4500'},
    ],
    english:'abcd',
    numberArr:['1','2','3','4','5','6','7','8']
}

const mutations={
    setName(state,Newname){//更新名字
        state.userInfo.name = Newname
    },
    addUserArr(state,addArr){//给 numberArr 增加数据
        return state.numberArr.push(addArr)
    }
}
const actions ={//不能直接更改state的数据，必须通过mutations
    setUserSecond(context,addNewArr){
        //将异步在action中进行封装
        setTimeout(()=>{
            //调用mutation context上下文，默认提交的就是自己模块下的
            context.commit('addUserArr',addNewArr)//调用本模块下的 addUserArr 方法
            // context.commit('setting/addUserArr',addNewArr)//调用setting模块下的方法
        },1000)
    }
}

const getters ={
    //分模块后，state指子模块的state
    UpperCaseName(state){//第一个参数永远是state，
        return state.english.toUpperCase()
    },
    list(state){
        let money=0
        state.list.map((item)=>{
            money+=parseInt(item.price)
        })
        return money
    }
}

export default {
    namespaced: true,//开启命名空间，用来映射子模块
    state,
    mutations,//如果开启了命名空间，就直接挂载到子模块上了，默认是挂载到全局的
    actions,
    getters
}

//store/modules/setting.js


//设置模块
const state = {
    theme:'我是setting模块下的 theme 值',
    sex:'男',
    school:'西安电子科技大学',
    date:'2023年7月25日',

}

const mutations={
    setSex(state,newSex){//更新性别
        state.sex = newSex
    }
}
const actions ={}
const getters ={}

export default {
    namespaced: true,//开启命名空间，用来映射子模块
    state,
    mutations,
    actions,
    getters
}

Vuex modular management

Guess you like