Vuex-命名空间

主要记录一下加了namespaced:true的时候，如何访问module里面的数据

user.js

export default {
    namespaced:true,
    state:{
        username:'张三1'
    },
    mutations:{
        setUsername(state,name){
            console.log(name)
        }
    },
    getters:{
        usernameDesc(state){
            return '当前用户的姓名是'+state.username
        }
    },
    actions:{
        AsyncSetUsername({commit,state}){
            setInterval(()=>{
                commit('setUsername','user')
            },2000)
        }
    }
}

cart.js

export default {
    namespaced:true,
    state:{
        cart:'129'
    },
    mutations:{
        setUsername(state,name){
            console.log(name)
        }
    },
    getters:{
        cartDesc(state){
            return '商品的价格是'+state.cart
        }
    },
    actions:{
        AsyncSetUsername({commit,state}){
            setInterval(()=>{
                commit('setUsername','cart')
            },2000)
        }
    }
}

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
import user from './user/user.js'
import cart from './cart/cart.js'
import test from './test/test.js'
export default new Vuex.Store({
    modules:{
        user,
        cart,test
    }
})

1. 访问state

state没有什么变化 在访问的时候和没加上namespaced一样，加上模块的名字即可

...mapState({
                username(state) {
                    return state.user.username
                },
                cart(state){
                    return state.cart.cart;
                }
            })

2. 访问mutations

使用辅助函数的时候，第一个是方法的别名，如果moduleA和muduleB中名字一样 可以起别名，不然的话建议和module里面的名称一致，第二个参数则是命名空间的名字也就是模块名/模块下对应的方法名

# 引入        
            ...mapMutations({
                setUsername:'user/setUsername',
                setUsername1:"cart/setUsername"
            })
# 使用 注意我这个是在uniapp上进行测试的 vue的话 这里是mounted/created/beforeMount都可
onLoad() {  
            // mutations
            this.setUsername('我是module/user'); //我是module/use user.js:8
            this.setUsername1('我是module/cart') //我是module/cart cart.js:8            
        }

3. 访问getters

getters和actions的访问其实和mutations的访问方式是一样的

            ...mapGetters({
                cartDesc:'cart/cartDesc',
                usernameDesc:'user/usernameDesc'
            })


          // getters
            console.log(this.cartDesc)
            console.log(this.usernameDesc)

4.访问actions

            # 这里同名了 就需要进行一个起别名
            ...mapActions({
                AsyncSetUsername:'user/AsyncSetUsername',
                AsyncSetUsername1:"cart/AsyncSetUsername"
            })
            // actions
            this.AsyncSetUsername();
            this.AsyncSetUsername1();