Vuex 在组件调用this.$store.state.xx.xx undefind

Question

state.js
state:{
    data:{}
}

mutation.js
type.data (state, arg) {
    return state.data = arg
}

action.js
commit(types.data, {a: 111, b: 222})

getters.js
export const data = (state) => {
    return state.data
}

在组件的methods方法中调用,非模板template里.

this.$store.getters.data       //{a:111, b:222}
this.$store.state.data       //{a:111, b:222}

但是,直接调取值就不可以.
this.$store.getters.data.a     // undefined
this.$store.state.data.a       // undefined

请教一下,怎么在组件中可以直接调用啊~?

Answer 1

楼主，可以参考下这篇文章，传送门

---

这里给出我本地测试的代码吧，结论是，都是可以取到值的

// vuex相关
// store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    data: {}
  },
  getters: {
    data: (state) => state.data
  },
  mutations: {
    getData (state, arg) {
      state.data = arg;
    }
  },
  actions: {
    getData(context) {
      context.commit('getData', {a: 1, b: 2});
    }
  }
});

// main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = process.env.NODE_ENV === 'production';

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  // use Runtime-only
  // https://vuejs.org/v2/guide/installation.html
  render: (h) => h(App)
});

// 测试的index.vue

...
created() {
  this.storeData();
  console.log(this.$store.state.data.a);
  // 这里可以取到值 1
  console.log(this.$store.getters.data.a);
 // 这里也可以取到值 1
},
methods: {
  storeData() {
    this.$store.dispatch('getData');
  }
},
...

Answer 2

state.js
state: {
   remind: {}
}

mutation_types.js
export const REMAIND = 'REMAIND'

mutation.js
[type.REMIND] (state, arg) {
    state.remind = arg
}

actions.js
getdata ({state, commit}, arg) {
    ...,
    commit(types.REMAIND, {free: res.data.freeNum, queue: res.data.queueNum})
}


getters.js
export const remind = (state) => {
    return state.remind
}

test.vue
methods:{
   submit () {
       this.$store.dispatch('getData')
       console.log(this.$store.getters.remind)       // {obj....arry(0)}
       console.log(this.$store.getters.remind.free)   // undefined
       console.log(this.$store.getters.remind.queue)  // undefined
   }
}

点击submit 第一次得到的都是空
第二次点击submit的是时候,就都有值了..
state,和 getters 都是这样的,为什么呢?