Vuex is split using (detailed) modular processing

You still don’t know how vuex works? Vuex is quick to learn

• Blog link: blog.csdn.net/weixin_4364…
• Juejin. im/editor/post…

When we had a certain understanding of Vuex, we found that as the project became larger and larger, it was obviously inconvenient to maintain and use all stores in a single JS. At this time, we had better separate the stores. Make state, getters, mutations, actions independently managed. As for the Module provided by VUex, I think it is not suitable for management if there are too many pages. It is not recommended to use it (personal opinion)

Create the store folder and six js files in the SRC directory

3. Directory file splitting details
states.js

const state =  {
    count:0
}
export default state
Copy the code

getter.js

const getters =  {
    docount:(state,getters) = > {
        return state.counts
    } 
}
export default getters
Copy the code

types.js

export const SET_COUMT = 'SET_COUMT'
export const SET_COUMT_ADD = 'SET_COUMT_ADD'
export const SET_COUMT_REDUCE = 'SET_COUMT_REDUCE'
Copy the code

mutations.js

import * as TYPES from './types';

const mutations = {
    [TYPES.SET_COUMT](state, v) {
        state.count = v;
    },
    [TYPES.SET_COUMT_ADD](state,v) {
        if(v){
            state.count += v
        }else{
            state.count ++
        }
    },
    [TYPES.SET_COUMT_REDUCE](state,v) {
        if(v){
            state.count -= v
        }else{
            state.count --
        }
       
    }
}
export default mutations
Copy the code

actions.js

import * as TYPES from './types';

const actions = {
    ADD1000(vuex) {
        // axios.get("/customer/user_info").then(res => {
        // commit(TYPES.SET_COUMT, res.data);
        // });
        vuex.commit(TYPES.SET_COUMT_ADD, 1000);
    },
    REdUCE1000(vuex) {
        // axios.get("/customer/user_info").then(res => {
        // commit(TYPES.SET_COUMT, res.data);
        // });
        vuex.commit(TYPES.SET_COUMT_REDUCE, 1000); }}export default actions
Copy the code

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import  state  from './states';
import  getters  from './getters';
import  mutations  from './mutations';
import  actions  from './actions';

Vue.use(Vuex)

export const store = new Vuex.Store({
        state,
        getters,
        mutations,
        actions,
    })

Copy the code

At this point, the split is complete, and the calling method is the same as before, but it’s easier to maintain and more recognizable.

4. Vuex is used to introduce store in main.js and initialize it

Understand the vuEX auxiliary function call method
Mp.csdn.net/mdeditor/88…

<script> import { mapState , mapMutations , mapActions , mapGetters } from 'vuex'; export default { data(){ return{ } }, computed:{ ... mapState({ counts:(state) => state.count }), ... mapGetters({ getternum:'docount' }) }, methods:{ ... mapMutations({ addnum:'SET_COUMT_ADD', reducenum:'SET_COUMT_REDUCE' }), ... mapActions({ addmore:'ADD1000', reducemore:'REdUCE1000' }), add(){ this.addnum() console.log(this.counts,'+1') }, reduce(){ this.reducenum() console.log(this.counts,'-1') }, add1000(){ this.addmore() console.log(this.counts,'+1000') }, reduce1000(){ this.reducemore() console.log(this.counts,'-1000') } }, mounted(){ console.log(this.counts,this.$store.state.count,111111111) } } </script>Copy the code

The vuEX auxiliary function call methods are shown above,

• Principles and methods click –> learn about vuEX auxiliary function call method mp.csdn.net/mdeditor/88…

• Don’t want to copy and paste directly to github:github.com/babybrother…