Question

我无法理解以下内容：

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

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

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

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

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

   console.log(currentName); 
},

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

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

Answer 1

由于我们的讨论：

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

当Vuex中的异步操作使用某个值解析时需要触发某些函数时，可以使用计算属性上的watch来实现它，该属性将从Vuex状态返回一个值。当商店中的值发生更改时，计算属性会反映这些更改并执行watch侦听器：

＆＃13;

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
  }
})

＆＃13;

<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>

＆＃13;

Answer 2

VueJS-访问已安装的内部存储数据

遇到此问题，结果证明是范围问题。

商店：

let myValue = getValue();
private getValue(): Observable<string> {
    return this.httpClient.get('/server url', { observe: "response" }).pipe(
        map(res => res.headers.get('X-Some-Header-Name')),
    );
}

信件：

export default () => {
     items:[],
     globalCompanies:{
        current:[],
        all:[],
        currentName: "Something"
     },
     ok: "Here you go"
}

已安装：这有效...

export default {
   getGlobalCompanies(state){
      return state.globalCompanies;
   }
}

这很糟糕：到达已安装范围之外的商店

mounted() {
   // Initialize inside mounted to ensure store is within scope
   const { getters } = this.$store; 

   const thisWorks = () => {
      const globalCompanies = getters.getGlobalCompanies;
   }
},

VueJS - 访问已安装的商店数据

2 个答案: