Question

我目前在一个项目库中工作，可以将样板作为一个新项目进行分叉。我有一个核心项目，这是一个定义了vuex存储的插件。样板与设置/获取商店元素的核心进行通信。

核心：store / modules / users.js （已在新商店中添加）

import OcuService from '../../services/OcuService.js';
import Vue from 'vue';

const state = {
    authUser: null,
    userId: null
}

const mutations = {
    SET_USER(state, userObj){
        Vue.set(state,"authUser",userObj);
        Vue.set(state,"userId",userObj.id);
        // state.authUser = userObj;
        console.log("state updated: SET_USER",state.userId);
        OcuService.setToken(userObj.access_token);
    },
    CLEAR_USER(state){
        // state.authUser = null
        Vue.set(state,"authUser",null);
        Vue.set(state,"userId",999);
        console.log("state updated: CLEAR_USER",state.userId);
    }
}

const getters = {
    getActiveUser: (state) => () => {
        return state.authUser;
    }
}

const actions = {
    setUserObject: (context, userObj) => {
        context.commit('SET_USER', userObj);
    },
    clearAuthUser: (context) => {
        context.commit('CLEAR_USER');
    }
}

export default {
    state, actions, mutations, getters
}

我的插件中的 Core：index.js 如下

import Vue from 'vue';

// //COMPONENTS
import CustomButton from './components/Button.vue';
import LogoutButton from './components/LogoutButton.vue';
import BrowserHappy from './components/BrowserHappy.vue';

import Login from './components/Login.vue';
import ResetPassword from './components/ResetPassword.vue';

//TEMPLATES
import Api from './templates/docs/Api.vue';
import Inuit from './templates/docs/Inuit.vue';

//SERVICES
import EventBus from './services/EventBus.js';
import OcuService from './services/OcuService.js';

//STORE
import store from './store';

//MIXINS
var fassetsfilter = require ('./mixins/FassetsFilter.js').FacetsFilter;

//EXPORT
var Core = {
    install (Vue) {
        //use in Vue-functions (like created()).
        Vue.prototype.$dashboardStore = store; //this.$dashboardStore
        Vue.prototype.$ocuService = OcuService; //this.$ocuService
        Vue.prototype.$fassetsFilter = fassetsfilter; //this.$fassetsFilter
    }
}

export { Core, CustomButton, LogoutButton, BrowserHappy, Login, ResetPassword, OcuService, Api, Inuit };

$ dashboardStore是全局定义的，因此当我在user.js中执行setUserObject操作时，该对象已正确更新（我可以在Vue开发人员工具中看到它）。但是当我添加计算时，它只会在开始时更新，而不会在user.js中的authUser更改时更新。

样板：Navigation.vue

<script>
export default {
  name: 'Home',
  computed:{
      activeUser () {
          return this.$dashboardStore.state.users.authUser
      }
  },
  created(){
  }
};
</script>

我见过很多有此问题的人，但没有任何解决办法。有人有线索吗？

计算出的Vuex存储不会触发任何更改

0 个答案: