vuex commit 不提交 store

Question

我无法让我的承诺在商店中工作。

我正在通过一个动作调用突变，这似乎工作正常。

export const location = {
  state: {
    x: 0,
    y: 0,
    z: 0,
    extent: [],
    epsg: 'EPSG:3857'
  },
  mutations: {
    setLocation(state, payload) {
      // mutate state
      console.log("Commit");
      state.x = payload.x;
      state.y = payload.y;
      console.dir(state); //this does return the mutated state.
    }
  },
  actions: {
    setLocation(context, payload) {
      console.dir(payload);
      context.commit('setLocation', payload);
    }
  },
  getters: {
    mapLocation(state) {
      return state
    }
  }
}

操作已导入到我的组件中：

methods: {
     ...mapActions(['setLocation']),

然后调用：

var location = {
      x: data[0],
      y: data[1]
    }
    this.setLocation(location);

这一切似乎都有效，但是当我查看 Vue 开发人员工具时，Vuex 基础状态保持不变并且我有一个活动的突变 (setLocation)。我可以单击 'Commit All' 来提交有效的突变。

在我的组件中，我在 getter mapLocation 上使用观察器，当我单击“全部提交”时它会触发。

如何强制它提交到商店？

谢谢

Answer 1

好吧，这其实很简单problem/oversight。

我没有在 DOM 中对我正在观看的计算属性中的任何内容进行建模，因此它从未更新过。

所以解决办法就是简单地使用v-model="mapLocation"来确保手表能正常工作。

vuex commit 不提交 store

vuex commit does not commit to store

vue.js

vuex