vuex的最佳实践

目录结构如下

 

1， mutation 常量代替变变量 

export let BOOKS ={
    ADDJS:'ADDJS',
    ADDJAVA:"ADDJAVA",
    RESET:'RESET'
}

export let USERS ={}

2，开启命名空间module

嵌套不要太深 尽量扁平化 

灵活使用 createNamespacedHelper辅助函数

user.js 

import {USERS} from '../mutationTypes';
import {BOOKS} from '../mutationTypes';

const state = {
    "mingming": 0,
    "honghong":0,
};

const getters={};


const actions={
    resetAction({commit,state},count){ //调用其他模块部分
        commit(`books/${BOOKS.RESET}`,count,{root:true})
    }
};

const mutations ={

};

export default {
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}

books.js

import {BOOKS} from '../mutationTypes';

const state = {
    "js":0,
    "java":0,
};

const getters={
    jsTwoTimes:(state)=>state.js*2
};

const actions={
    addJsActinon({commit,state},count){
        console.log()
        commit(BOOKS.ADDJS,count)
    },
    addJavaActinon({commit,state},count){
        commit(BOOKS.ADDJAVA,count)
    }
};

const mutations ={
    [BOOKS.ADDJS](state,count){
        state.js=state.js+count 
    },
    [BOOKS.ADDJAVA](state,count){
        state.java=state.java+count 
    },
    [BOOKS.RESET](state,count){
        state.js=count;
        state.java=count;
    }

};

export default {
    namespaced:true,
    state,
    getters,
    actions,
    mutations
}

index.js

import Vue from 'vue';
import VueX from 'vuex';

import users from './module/users';
import books from './module/books';

Vue.use(VueX);

export default new VueX.Store({
    state:{
        hasMoney: 100000
    },
    modules:{
        users,
        books
    }
})

3， 在vue文件内使用mapstate，和mapActions 来简化写法 

 

<template>
<div>
    <div>
        <span>js</span>&nbsp;&nbsp;
         <span>{{js}}</span>&nbsp;&nbsp;
         <span>js *2</span>&nbsp;&nbsp;
         <span>{{jsTwoTimes}}</span>&nbsp;&nbsp;
         <button @click="addJsActinon(2)">js+2</button>
     </div>
         <div>
        <span>java</span>&nbsp;&nbsp;
         <span>{{java}}</span>&nbsp;&nbsp;
         <button @click="addJavaActinon(3)">java+3</button>
     </div>
    
    <div >
        <button @click="resetAction(0)">reset</button>
    </div>
   
     </div>
</template>

<script>
 import {mapState,mapActions,mapGetters} from "vuex";
export default {
   
    data(){
        console.log(this.$store)
        return {}
    },
    computed:{
        ...mapState({
            js:(state)=>state.books.js,
            java:(state)=>state.books.java,
            
        }),
        ...mapGetters('books',{'jsTwoTimes':'jsTwoTimes' })
    },
    methods:{
        ...mapActions('books',['addJsActinon','addJavaActinon']),
        ...mapActions('users',['resetAction']),
    }
    
}
</script>