Vue Vuex模块化编码

正常写vuex的index的时候如果数据太多很麻烦，如有的模块是管理用户信息或修改课程等这两个是不同一个种类的，如果代码太多会造成混乱，这时候可以使用模块化管理

原始写法

如果功能模块太多很乱

import Vue from 'vue'
import Vuex from 'vuex'
//导入Vuex

Vue.use(Vuex)

const actions = {

    addSum(context, value) {
        //context 上下文里面有commit函数 value 是组件传过来的值
        context.commit('AddSum', value)
        //获取到了数据 操作数据
    },

    //获取数据 如发起请求等
}


const mutations = {


    AddSum(state, value) {
        state.sum += value
        //这样就完成了赋值
    }
    
    //操作数据
}

const state = { sum: 0 }
//保存数据


//暴露出去给别人使用
export default new Vuex.Store({
    actions, mutations, state

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

---

模块化写法

如果代码逻辑特别多可以分文件细化

import Vue from "vue";
import Vuex from 'vuex'
Vue.use(Vuex)


//用户信息模块
const userList =
{
    namespaced: true,//开启命名空间  true开启才可以怎样获取数据   ...mapState('classList',['方法名','方法名'])
    actions: {},  //获取数据 如发起请求等
    mutations:
    {
        getUserId(state, value) {
            state.user_id = value
        } //获取用户ID


    },  //操作数据
    state: { user_id: '' },// //保存数据
    getters: {}//计算

}



//班级模块
const classList =
{
    namespaced: true,//开启命名空间  true开启才可以怎样获取数据   ...mapState('classList',['方法名','方法名'])
    actions: {},  //获取数据 如发起请求等
    mutations: {},  //操作数据
    state: { class_id: '' },// //保存数据
    getters: {}//计算

}




export default new Vuex.Store({
    modules: { userMsg: userList, classMsg: classList }
    //获取userList需要从userMsg获取
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import { mapState,mapMutations,mapActions } from 'vuex';
1

写入数据

 <button @click="getUserId('dpc520')">加button>
 
1
2

 ...mapMutations('userMsg',['getUserId'])
1

读取数据

<h1>{{ user_id }}h1>
1

computed: {
    ...mapState('userMsg', ['user_id'])
    //第一个参数表示从vuex里的userMsg对象获取state的user_id值
    }
1
2
3
4

---

模块化原始方法 commit getters

commit

模块化使用原始方法赋值需要这样写

   <button @click="test()">原始赋值</button>
1

区别终于 / 号

 test() {
this.$store.commit('userMsg/getUserId', '123')
     }
1
2
3

getters

this.$store.getters['xxx/xxx']
1