vue--vuex--模块化编码

将store中的index.js的actions、mutations、state、getters分类

// 求和功能相关的配置
const countOptions ={
    actions:{},
    mutations:{},
    state:{},
    getters:{}
}
// 人员管理功能相关的配置
const personOptions ={
    actions:{},
    mutations:{},
    state:{},
    getters:{}
}

namespaced:true

当使用这种简写是，需要配置上加上：namespaced:true

当是同模块化时：

** 使用map自动生成数据简写：**

...mapState('countAbout',['sum','school','subject']),
...mapState('personAbout',['personList']),
 ...mapGetters('countAbout',['bigSum'])

**方法简写：**

    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

自己通过$store调用

 computed: {
    personList(){
        return this.$store.state.personAbout.personList
    },
    // ...mapState(['personList']),
    sum(){
        return this.$store.state.countAbout.sum
    },
    firstPersonName(){
        return this.$store.getters['personAbout/firstPersonName']
    }

  },
  methods:{
    add(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.commit('personAbout/ADD_PERSON',personObj)
        console.log(personObj)
    },
    addWang(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.dispatch('personAbout/addPersonWang',personObj)
        console.log(personObj)
    }
  },
};

自己通过$store调用 : state、commit、getters

this.$store.state.countAbout.sum
 this.$store.getters['personAbout/firstPersonName']
this.$store.dispatch('personAbout/addPersonWang',personObj)
 this.$store.commit('personAbout/ADD_PERSON',personObj)

count组件借助map自动生成相关属性和方法：

person组件通过$store自己调用生成相关属性和方法：

store的index.js

// 该文件用于创建vuex中的store
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 求和功能相关的配置
const countOptions = {
    namespaced:true,
    actions: {
        jia(context, value) {
            // console.log("action中的Jia被调用了",context,value)
            context.commit('JIA', value)
        },
        jian(context, value) {
            // console.log("action中的Jia被调用了",context,value)
            context.commit('JIAN', value)
        },
        jiaOdd(context, value) {
            // console.log("action中的jiaOdd被调用了",context,value)
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            // console.log("action中的jiaWait被调用了",context,value)
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value) {
            // console.log("mutations中的JIA被调用了",state,value)
            console.log('$$$$$', value);
            state.sum += value
        },
        JIAN(state, value) {
            // console.log("mutations中的JIAN被调用了",state,value)
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}
// 人员管理功能相关的配置
const personOptions = {
    namespaced:true,
    actions: {},
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {}
}


// // 准备actions--用于响应组件中的动作
// const actions = {

// }
// // 准备mutations--用于操作数据
// const mutations = {



// }
// // 准备state--用于存储数据
// const state = {


// }
// // 准备getters--用于将status中的数据进行加工
// const getters = {

// }

Vue.use(Vuex)

// // 创建并暴露store
// export default new Vuex.Store({
//     actions,
//     mutations,
//     state,
//     getters
// })
// 创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

结果：

优化index.js 将不同的分类创建不同的文件，然后引入

count.js

// 求和功能相关的配置
export default {
    namespaced: true,
    actions: {
        jia(context, value) {
            // console.log("action中的Jia被调用了",context,value)
            context.commit('JIA', value)
        },
        jian(context, value) {
            // console.log("action中的Jia被调用了",context,value)
            context.commit('JIAN', value)
        },
        jiaOdd(context, value) {
            // console.log("action中的jiaOdd被调用了",context,value)
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            // console.log("action中的jiaWait被调用了",context,value)
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value) {
            // console.log("mutations中的JIA被调用了",state,value)
            console.log('$$$$$', value);
            state.sum += value
        },
        JIAN(state, value) {
            // console.log("mutations中的JIAN被调用了",state,value)
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

person.js

// 人员管理功能相关的配置
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            }else{
                alert('添加的人必须姓王')
            }
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}

index.js

// 该文件用于创建vuex中的store
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'

import countOptions from './count'
import personOptions from './person'


// // 准备actions--用于响应组件中的动作
// const actions = {

// }
// // 准备mutations--用于操作数据
// const mutations = {



// }
// // 准备state--用于存储数据
// const state = {


// }
// // 准备getters--用于将status中的数据进行加工
// const getters = {

// }

Vue.use(Vuex)

// // 创建并暴露store
// export default new Vuex.Store({
//     actions,
//     mutations,
//     state,
//     getters
// })
// 创建并暴露store
export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        personAbout: personOptions
    }
})

在action中发起网络请求

import axios from "axios"
import { nanoid } from 'nanoid'

addPersonServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
                },
                error => {
                    alert(error.message)
                }
            )
        }

"addPersonServer">添加一个,名字随机

 addPersonServer(){
        this.$store.dispatch('personAbout/addPersonServer')
    }

person.js

// 人员管理功能相关的配置
import axios from "axios"
import { nanoid } from 'nanoid'
export default {
    namespaced: true,
    actions: {
        addPersonWang(context, value) {
            if (value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON', value)
            } else {
                alert('添加的人必须姓王')
            }
        },
        addPersonServer(context) {
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name
        }
    }
}

person组件