核心概念-Module-命名空间

默认情况下，模块内部的 action 和 mutation 仍然是注册在全局命名空间的——这样使得多个模块能够对同一个 action 或 mutation 作出响应。Getter 同样也默认注册在全局命名空间，但是目前这并非出于功能上的目的（仅仅是维持现状来避免非兼容性变更）。必须注意，不要在不同的、无命名空间的模块中定义两个相同的 getter 从而导致错误

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

xxxxxxxxxx
export default {
    namespaced:true,
    state:{
        token:"HHO56897gh"
    },
    mutations:{
        setToken(state,token){
            state.token = token
        }
    },
    actions:{
        asyncSetToken({ state, commit, rootState },token){
            console.log(state,rootState);
            commit("setToken",token)
        }
    },
    getters:{
        getToken(state, getters, rootState){
            console.log(getters, rootState);
            return "当前的token:"+state.token;
        }
    }
}

xxxxxxxxxx
<template>
    <h3>登录</h3>
    <p>{{ $store.state.login.token }}</p>
    <p>{{ currentToken }}</p>
    <button @click="updateHandler">修改</button>
</template>
<script setup>
import { useStore } from "vuex"
import { computed } from "vue"
const store = useStore()
const currentToken = computed(() =>{
    return store.getters["login/getToken"]
})
function updateHandler(){
    // store.commit("login/setToken","5555")
    store.dispatch("login/asyncSetToken","555555")
}
</script>