Vuex状态管理失效

store.js 部分代码

const state = {
    userInfo: null,    //用户信心
    login: false       //是否登录
};

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

Mutation.js 部分代码

 [GET_USERINFO](state,info){
        state.userInfo = info.info;
        state.login = true;
        setStore('token', info.token);
    }

app.vue 部分代码

  export default {
        data() {
            return {
                phone: 18046050833,
                password: "xrs123456"
            }
        },
        computed: {
            ...mapState([
                'login'
            ]),
        },
        mounted() {
            //更新用户信息
            if (this.login) {
                this.updateUserInfo();
            }
            //未登录时登陆一次(测试用)
            if (!this.login) {
                console.log(this.login);
                this.accountlogin();
            }
        },
        methods: {
            ...mapActions([
                'updateUserInfo'
            ]),
            ...mapMutations([
                'GET_USERINFO',
            ]),
            //账号登录
            async accountlogin() {
                if (!this.phone) {
                    return false;
                } else if (!this.password) {
                    return false;
                }
                let userInfo = await accountLogin(this.phone, this.password);
                if (userInfo.success) {
                    this.GET_USERINFO(userInfo.data);
                }
            }
        }
    }

我的问题是 通过 …mapState([ ‘login’]), 得到的this.login 一直都是false,每刷新一次都会 this.accountlogin();

使用vuex-persistedstate插件进行持久化管理

1 Like

刷新之后vuex里面是store数据本来就会丢吧。前台一般不都是结合storage一起用么。

你每次刷新 肯定 都是 false ,因为每次刷新就重新运行 vue 程序,store 就是你定义的默认值

登陆之后才会改成 true

你好,我遇到一个问题,没有刷新再其他组件也没法监听到vuex的数据变化,这是为什么呢?