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

Posted

技术标签:

【中文标题】在 Vue 和 Vuex 的非子组件中获取存储值【英文标题】:Get store value in non-child component in Vue and Vuex 【发布时间】:2018-08-07 06:36:17 【问题描述】:

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

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

存储/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'
);

存储/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;

这是我对 store 的实现,只是在 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 中我观察到了这一点:

现在,我尝试进入 store 并从另一个组件获取该数据,假设一个位于路径 /support/open 中的组件以下列方式,同时我尝试在 User 中分配 store 的这个值我在 data() 中的对象:

<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 请求,这会给我一个错误,显然是因为对象是空的。 还尝试创建一个计算属性,其中我只返回用户的 id,但它也不起作用,因为在这样做的情况下,返回的值是商店的默认值,而不是里面的值商店有效。

最后,如果需要,这是我的 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/>'
);

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

【问题讨论】:

您在mounted 中将user 设置为getUser 的值,因为AJAX 调用需要时间 是一个空对象。您需要等到user 有实际值才能使用它。此外,您不应根据计算值初始化数据值,而应仅使用计算值。 @Bert 当然,但是当我尝试使用计算值时,我得到一个未定义的错误,这就是我不明白的原因。 【参考方案1】:

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

必须使用计算的属性,而不是将它们的值分配给我的 copmonent 数据中的属性或对象。

【讨论】:

以上是关于在 Vue 和 Vuex 的非子组件中获取存储值的主要内容,如果未能解决你的问题,请参考以下文章

调度操作后获取 vuex 存储状态

我正在尝试从我的 vuex 存储中获取数据,但它给出了一个错误

vuex实现原理

Vue,vuex:如何使用命名空间存储和模拟对组件进行单元测试?

使用 Vue + Vuex 在渲染之前无法获取对象的状态属性

如何在 Vue 3 组件中使用 Vuex 4 状态数据作为另一个调度的有效负载?