VueJS - 访问已安装的商店数据 [英] VueJS - Accessing store data inside mounted

问题描述

我无法理解以下内容:

我有一个 store，其中包含应用程序所需的变量.特别是，有一个 globalCompanies 存储:

全球公司:{当前的: []，全部: []，当前名称:"",}

在另一个组件中，我想执行以下操作:

mounted() {this.$store.dispatch("fetchUsers");var currentName = this.$store.state.globalCompanies.currentName;控制台日志(当前名称)；},

然而，这只是显示为空.我知道该值在那里，因为我有 computed 返回 currentName 并且它在视图本身内工作正常.它只是不喜欢它位于已安装组件中的事实.

我哪里出错了，我该怎么做才能解决这个问题?我真的需要捕获公司名称以便将其用于某些实时事件.

解决方案

作为我们讨论的结果:

在问题 Vuex 状态值中，在组件的 mounted 钩子中访问，返回空值，因为它是在异步操作中设置的，该操作在 mounted 执行之前不会解析.

当您需要在 Vuex 中的异步操作解析为某个值时触发某些函数时，您可以在计算属性上使用 watch 来实现它，该属性从您的 Vuex 状态返回一个值.当 store 中的值发生变化时，计算属性会反映这些变化，并且 watch 侦听器会执行:

const store = new Vuex.Store({状态: {全球公司:{测试:空}},突变:{setMe:(状态，有效载荷)=>{state.globalCompanies.test = 有效载荷}},动作:{假装获取:({提交})=>{setTimeout(() => {commit('setMe', '我的文字在这里！')}, 300)}}})新的 Vue({el: '#app',店铺，计算:{cp: function() {//当异步调用解析时计算属性将被更新返回 this.$store.state.globalCompanies.test;}},watch: {//在这里观看变化cp:函数(新值，旧值){//在这里应用你的逻辑，例如调用你的监听器函数console.log('was: ', oldValue, ' now: ', newValue)}},安装(){this.$store.dispatch('pretendFetch');//console.log(this.cp, this.$store.state.globalCompanies.test);//空值//var cn = this.$store.state.globalCompanies.test;//空值//console.log(cn)//null}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script><script src="https://unpkg.com/vuex@2.3.1"></script><div id="应用程序">{{cp}}

I'm having trouble understanding the following:

I have a store which contains variables needed for the application. In particular, there is a globalCompanies which stores:

globalCompanies: {
   current: [],
   all: [],
   currentName: "",
}

Inside another component, I want to do the following:

mounted() {
   this.$store.dispatch( "fetchUsers" );

   var currentName = this.$store.state.globalCompanies.currentName; 

   console.log(currentName); 
},

However, this just shows as empty. I know the value is there because I have computed which returns the currentName and it works fine inside the view itself. It just doesn't like the fact that it's in the mounted component.

Where am I going wrong and what can I do to resolve this issue? I really need to capture the companies Name in order to use it for some real time events.

解决方案

As a result of our discussion:

In the question Vuex state value, accessed in component's mounted hook, returns empty value, because it is set in an async action which does not resolve before mounted executes.

When you need to trigger some function when async action in Vuex resolves with a value, you can achieve it using watch on a computed property, which returns a value from your Vuex state. When a value in store changes, the computed property reflects these changes and watch listener executes:

const store = new Vuex.Store({
  state: {
    globalCompanies: {
      test: null
    }
  },
  mutations: {
    setMe: (state, payload) => {
      state.globalCompanies.test = payload
    }
  },
  actions: {
    pretendFetch: ({commit}) => {
      setTimeout(() => {
        commit('setMe', 'My text is here!')
      }, 300)
    }
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    cp: function() { // computed property will be updated when async call resolves
      return this.$store.state.globalCompanies.test;
    }
  },
  watch: { // watch changes here
    cp: function(newValue, oldValue) {
      // apply your logic here, e.g. invoke your listener function
      console.log('was: ', oldValue, ' now: ', newValue)
    }
  },
  mounted() {
    this.$store.dispatch('pretendFetch');
    // console.log(this.cp, this.$store.state.globalCompanies.test); // null
    // var cn = this.$store.state.globalCompanies.test; // null
    // console.log(cn) // null
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script src="https://unpkg.com/vuex@2.3.1"></script>
<div id="app">
  {{ cp }}
</div>

这篇关于VueJS - 访问已安装的商店数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！