Gestión modular de Vuex

Si su proyecto es pequeño, no es necesario utilizar la modularidad;

Sin embargo, si el proyecto en el que participa es de tamaño mediano a grande, entonces la modularización de Vuex es esencial; de lo contrario, todo el archivo estará inflado y será difícil de administrar.

Mediante gestión modular: cada módulo tiene su propio estado y métodos, y cada módulo gestiona sus propios datos, por lo que no es fácil causar confusión.

Paso 1: instale Vuex

Método de instalación uno:

Si está utilizando el método vue create xxx para crear un proyecto, si marca vuex cuando lo crea, lo descargará e instalará automáticamente.

Método de instalación dos:
npm install vuex@next --save
or
yarn add vuex@next --save
Pero al descargarlo manualmente en el segundo paso, debe importarlo y montarlo en main.js.

Paso 2: crea la carpeta de módulos en la carpeta de la tienda

Paso 3: cree el archivo js del módulo que necesita en la carpeta store/modules

Paso 4: crear la estructura interna del módulo

Paso 5: Importe cada módulo al archivo store/index.js del directorio raíz y móntelo

(Siempre que el módulo esté montado en el directorio raíz, se montará globalmente de forma predeterminada, a menos que habilite el espacio de nombres namespaced: true )

Paso 6: comience

1. Acceder a los datos del estado

①Llamamos directamente al estado de index.js en el directorio raíz:
console.log(this.$store.state)
②Usar método de mapeo
import {  mapGetters, mapState, mapMutations, mapActions } from 'vuex';
...mapGetters(['rootGetters01']),
③: Acceda a los datos de un determinado módulo mediante el método de mapeo
...mapState('user',['userInfo','numberArr'])
usuario: es el nombre del módulo, userInfo y numberArr son todos atributos de estado bajo el módulo de usuario (el requisito previo para acceder a los atributos en un determinado módulo es que cada uno tenga su propio espacio de nombres habilitado )

2. Desencadenar mutaciones

Método ①:

Contenido de página
<el-button type="primary" size="small" @click="updateName">更新名称</el-button>
updateName(){//更新姓名（user模块）
            //$store.commit('模块名/mutation名',额外参数)
            this.$store.commit('user/setName','回流生')
        },
contenido del módulo de usuario
const state = {
    userInfo:{
        name:'文龙刚',
        job:'前端开发工程师',
        age:'18'
    },
}

const mutations={
    setName(state,Newname){//更新名字
        state.userInfo.name = Newname
    },
}
Método ②: método para activar el mapeo en el módulo
...mapMutations('user',['addUserArr']),
...mapMutations('模块名',['方法名']),
Método ③: usar etiquetas directamente y pasar parámetros
<el-button type="primary" size="small" @click="setUserSecond('56')">使用模块映射方法并传参</el-button>
También existe un método de activación de acciones, que es consistente con el uso de mutaciones anteriores, pero el método de activación de acciones es
this.$store.dispatch('模块名/模块中的方法','参数')

El siguiente es el código específico, que se puede ejecutar para ver el efecto correspondiente.

//  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
}

Gestión modular de Vuex

Supongo que te gusta