无法获得Vuex突变或采取行动将数据传递给状态

Question

我无法通过突变或操作将数据传递到应用程序状态。 尽管花了几个小时阅读Vuex文档，但我什至不确定我是否正确调用了它们。

我开始创建一个变异，以在触发@click事件时简单地更新我的状态，但是当它不起作用时，我尝试了一个操作并得到了相同的结果：什么都没有。

我如何调用操作的示例：

<div v-for="(data, index) in dataList" :key="index">
  <div @click="updateDataSomewhereElse(data)">  // action called here
    // do some other stuff
  </div>
</div>

我如何从单文件组件中分派动作的示例：

// some code
methods: {
  updateDataSomewhereElse: function(data) {
    this.$store.dispatch('setData', data); // action dispatched here
  }
}

我的动作和变异示例：

// state code
mutations: {
  updateStateData(state, data) {
    state.data = data;
  }
},
actions: {
  setData({commit}, data) {
    commit('updateStateData', data);
  }
}

不用说，我期望当我的动作被调用时，状态会随着突变而更新，但是我什么也没得到。

我做错了什么？

编辑-更多详细信息：

我的初始状态示例：

state: {
  data: 'something'
}

从我的main.js中：

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

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

我知道它不会在我的Vue devtools中返回任何内容，因为它仅显示我的初始状态，并且无法从那里进行手动提交/调度。 另外，不会触发我的方法和操作中的console.log语句。 我已经使用Vue.use(Vuex);将store.js文件连接到Vue Vue.use(Vuex); ，所以这不是连接问题。

Answer 1

我通过简单地解决此问题：

<div v-for="(data, index) in dataList" :key="index">
  <div>
    <span @click="updateDataSomewhereElse(data)">do some other stuff</span>
  </div>
</div>

我不确定为什么或如何解决这个问题，但是现在我要更新状态。