vue3使用vuex

记录一下防忘

创建store.js如下

import {
    createStore
} from 'vuex'
const store = createStore({
    namespaced: true,
    state() {
        return {
            token: null,
            isLogin: false,
            userinfo: {},
        }
    },
    mutations: {
        
        setUserInfo(state, userinfo) {
            state.userinfo = userinfo;
        },
        setToken(state, token) {
            state.token = token;
            state.isLogin = true;
        },
    },
    actions: {
        setToken(store, newToken) {
            store.commit("setToken", newToken);
        },
        setUserInfo(store,userinfo) {
            store.commit("setUserInfo",userinfo)
        },
    }
})
export default store

然后在main.js引入->挂载

import stores from "@/request/store.js";//引入
const store = stores

//一些代码...

const app = createApp(App).use(store);//挂载到app

//一些代码...

以上步骤完成之后可以直接在其他页面上面调用

this.$store

 

1.在其他页面获取vuex中的数据

this.$store.state.xxx

xxx就是在store.js中state预定的数据键名，如 : this.$store.state.token 可以获取到当前vuex中存储的token的值

 

2.在其他页面修改vuex中的数据

在store.js中，存在mutation和action，我的理解是：在页面中使用action方法，让action方法去触发mutation方法，达到修改vuex中储存的数据的目的；

比如要修改vuex中储存的userinfo的值，在页面中使用分发

this.$store.dispatch('setUserinfo',this.userinfo)

触发了store.js中的action中的setUsetInfo,在这个方法中又commit到了mutation中的setUsetInfo，从而修改了vuex中存储的userinfo的值（不知道这么理解对不对）

3.如何在页面上监听vuex中数据的变化

可以直接在watch中监听

        watch: {
            "$store.state.userinfo": function(val) {
                this.userinfo = val
                console.log(val)

            },
        }