Vuex的模块化使用

目的： 让代码更好的维护，让更多数据分类更加明确。比如有个user的数据，多个组件使用不冲突

1. 修改js

store.js

import Vue from 'vue'
import Vuex from "vuex"

import countOptions from "@/store/count";
import personOptions from "@/store/person";

Vue.use(Vuex)

// 创建store
export default new Vuex.Store({
    modules: {
        countOptions,
        person: personOptions
    }
})

count.js

export default {
    namespaced: true, // 开启命名空间
    actions: {
        jiaSumOdd(context, num) {
            if (context.state.sum % 2 == 1) {
                context.commit('JIA_SUM_ODD', num)
            }
        },
        addSumWait(context, num) {
            setTimeout(() =>{
                context.commit('JIA_SUM_WAIT', num)
            }, 500)
        }
    },
    mutations: {
        'JIA': function (state, num){
            state.sum += num
        },
        'JIAN': function (state, num){
            state.sum -= num
        },
        JIA_SUM_ODD(state, num) {
            state.sum += num
        },
        JIA_SUM_WAIT(state, num) {
            state.sum += num
        }
    },
    state: {
        sum: 0
    },
    getters: {
        bigSum(state){
            return state.sum * 10
        }
    }
}

person.js

import axios from 'axios'

export default {
    namespaced: true, // 开启命名空间
    actions: {
        addPerson(context) {
            axios.get('https://fakerapi.it/api/v1/persons?_locale=zh_CN&_quantity=1')
                .then(response => {
                    let person = response.data.data[0]
                    let newId = 0
                    if (context.state.personList.length) {
                        newId = context.state.personList[0].id + 1
                    }
                    person.id = newId
                    console.log(person)
                    context.commit('ADD_PERSON', person)
                }, error => {
                    console.log(error)
                })
        }
    },
    mutations: {
        'ADD_PERSON': function (state, person) {
            state.personList.unshift(person)
        }
    },
    state: {
        personList: []
    },
    getters: {
        country(state) {
            return state.personList[0].address.city
        }
    }
}

2.组件中读取Vuex数据

2.1 读取state数据

2.2 读取getters数据

2.3 组件中调用dispatch

2.4 组件中调用commit