vuex 提交不提交存储 [英] vuex commit does not commit to store

问题描述

我无法承诺在商店工作.

I'm having trouble getting my commit to work on a store.

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

I am calling the mutation via an action, which seems to work fine.

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

动作被导入到我的组件中:

The action is imported into my component:

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

然后调用:

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

这一切似乎都有效，但是当我查看 Vue Developer Tools 时，Vuex Base 状态保持不变，并且我有一个活动突变 (setLocation).我可以点击全部提交"来提交有效的突变.

This all appears to work, but when I check out Vue Developer Tools, the Vuex Base state remains unchanged and I have an active mutation (setLocation). I can click 'Commit All' to commit the mutation which works.

在我的组件中，我在 getter mapLocation 上使用了一个观察器，当我单击全部提交"时它会触发.

In my component I am using a watcher on the getter mapLocation which fires when I click Commit All.

如何强制它提交到商店?

How can I force it to commit to the store?

谢谢

推荐答案

好吧，这实际上是一个非常简单的问题/疏忽.

Ok, this was actually a very simple problem/oversight.

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

I hadn't modelled anything in the DOM on the computed property I was watching, so it was never updated.

所以解决方案是简单地使用 v-model="mapLocation" 来确保手表触发.

So the solution is simply to use v-model="mapLocation" to ensure the watch fires.

这篇关于vuex 提交不提交存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！