在 Vue 和 Vuex 中获取非子组件中的存储值

Question

我有一个 Vuejs 应用程序，它使用 vue-router 作为路由，现在我想实现 Vuex 来管理它的全局状态。问题是我无法使用该商店，无论它是如何集成的或我如何尝试从组件中调用它，它都不起作用。

我的状态中只有一个 User 对象，并且我有一个突变和一个影响该状态的函数。当我初始化 Store 时，我用我需要的信息加载它，并且在 vue-tools 中信息正确显示，但是当我尝试从另一个组件访问该信息时出现问题。

store/index.js

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

import actions from './actions';

Vue.use(Vuex);

const state = {
  user: {}
};

const mutations = {
  SET_ACTIVE_USER: (state, action) => {
    state.user = action.payload;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  strict: 'false'
});

store/actions.js

import axios from 'axios';

const actions = {
  getActiveUser({ commit }) {
    axios({
      method: 'GET',
      url: '/support/getUserData/',
      headers: {
        credentials: 'same-origin'
      }
    }).then(r => {
      commit('SET_ACTIVE_USER', {
        payload: r.data
      });
    }).catch(e => {
      console.error(e);
    });
  }
};

export default actions;

那是我对商店的实现，只是在 App.Vue 根组件中我调用了那个突变来改变状态并且它是正确完成的。

App.vue

<script>
import { mapActions } from "vuex";
import axios from "axios";

export default {
  name: "eol-app",
  methods: {
    ...mapActions(["getActiveUser"])
  },
  created() {
    this.getActiveUser();
  }
};
</script>

所以，在 vue-tools 中我观察到这个：

现在，我尝试进入商店并从另一个组件获取该数据，假设一个组件按以下方式位于路径 /support/open 中，同时我尝试将这个值分配给存储在我的数据中的用户对象中（）：

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "eol-ticket-open-list",
  data() {
    return {
      user: {}
    };
  },
  mounted() {
    this.user = this.getUser;
    this.getConsortiums();
  },
  computed: {
    getUser() {
      return this.$store.state.user;
    }
  }
};
</script>

在 vue-tools 中我观察到这个：

但是如您所见，User 对象是空的，我无法使用它。更糟糕的是，如果我尝试使用用户的某些值发出 HTTP 请求，这会给我一个错误，显然是因为该对象是空的。还尝试计算属性，其中我只 return 用户的 id，但它也不起作用，因为在这样做的情况下， returns 的值是商店的默认值，而不是商店中有效的值。

最后，如果需要，这是我的 main.js 文件：

import Vue from 'vue';
import router from './router';
import store from './store';
import Element from 'element-ui';
import locale from 'element-ui/lib/locale/lang/es';
import 'element-ui/lib/theme-chalk/index.css';

// Components
import App from './App';

// ElementUI Root Configuration.
Vue.use(Element, {
  size: 'small',
  locale
});

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  store,
  router,
  components: {
    App
  },
  template: '<App/>'
});

欢迎任何帮助，因为我真的不明白自己做错了什么，也不知道如何解决这个问题。谢谢！

Answer 1

解决方案是 Ber 在原始问题的第一条评论中描述的解决方案，因为这不是他回答我的问题时的答案，所以已经解决了。

必须简单地使用计算属性，而不是将它们的值分配给属性或我的副本中数据中的对象。

在 Vue 和 Vuex 中获取非子组件中的存储值

Get store value in non-child component in Vue and Vuex

vue.js

vue-router

vuex