vuex中modules的简单使用示例

vuex中modules的简单使用示例

目录：

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import research from './modules/research'


Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        account,
        research
    }
})

research.js

export default{
    namespaced: true,
    state:{
        pageSize:10,
        pageNo:1,
        treeData:[
            {
                name:'研究院',
                key:'1-1',
                children:[]
            }
        ],
        researcherInfo:{},
        position:[

        ]
    },
    mutations:{
        setPageNo(state,val){
            state.pageNo = val
        },
        setPageSize(state,val){
            state.pageSize = val
        },
        setData(state,val){
            state.data[0].children = val
        },
        setCode(state,val){
            state.code = val
        }
    }
    
}

具体应用 ：leftList.vue

   ...
   <script>
import {mapState, mapMutations} from 'vuex'
export default {
    data() {
        return {
            
        }
    },
    computed:{
        ...mapState({
            treeData: state => state.researcher.treeData,
            pageSize:state => state.researcher.pageSize
        })
    },
    methods: {
        ...mapMutations({
            setCode : 'research/setCode',
            setPageSize: 'research/pageSize'
        })，
        edit(record){
        	this.$store.commit("research/setCode",record.code)
        }
    },
}
</script>