vuex的辅助函数和model模块化管理数据

1、vuex的辅助函数 辅助函数分别有

mapState 在computed中使用 使用方式：…mapState([""])

mapGetters 在computed中使用 使用方式：…mapGetters([""])

mapMutations 在methods中使用 使用方式：…mapMutations([""])

mapActions 在methods中使用 使用方式：…mapActions([""])

2、model模块化管理数据 状态树结构复杂的时候，可以用modules进行管理 多人协作开发，可以用modules，避免命名空间冲突

const  test1 ={
    namespaced:true, //开启命名空间，在各组件总 ...mapState("test1",{name:"name"})
    state:{name:'test1'},
    actions:{},
    mutations:{
    changeName(state,arg){
            state.name=arg;
        },
    getters:{}
}

const test2 = {
    namespaced:true,
    state:{},
    actions:{},
    mutations:{
        
        }
    },
    getters:{}
}

new Vuex.Store({
    state:{name:"root"},
    actions,
    mutations,
    getters 
    modules:{
        test1,
        test2
    }

})


在组件中使用：

{{this.$store.state.name}}

{{name}}

{{this.$store.state.test1.name}}

{{tes1Name}}


computed:{
    ...mapState({
        name:“name"
    }),
    ...mapState('test',{   
        test1Name:'name'
    })
}
methods:{
    ...mapMutations('test1',['changeName'])
}