javascript - 带有ajax的Vuex Action 未在计算中更新

Question

我将 Vue 与 Vuex 结合使用。在一种情况下，我使用 Ajax 来获取表示值。在路上的某个地方，可能在 computed 中它不再是响应式(Reactive)的。

在我的组件中:

props: [ 'x', 'y' ],
template: `
  <div class="presentation">
    {{ presentation }}
  </div>
`,
computed: {
  presentation() {
    return this.$store.getters.presentation({ x: this.x, y: this.y });
  }
}

Vuex 商店:

const store = new Vuex.Store({
  state: {
    table: {
      data: []
    }
  },
...

Vuex 操作:

我用 ajax 调用一个 url 并返回一个 promise 。我也犯了一个突变。

actions: {
  save: (context) => {
    let uri = 'some/uri';
    let params = {};
    let value = 'A value';

    return axios
    .post(uri, params)
    .then((response) => {
      context.commit('setPresentation', value);
    })
    .catch((error) => {
      console.log('error');
    })
    .finally(() => {});
  },
},

Vuex 突变:

mutations: {
  setPresentation: (state, value) => {
    let pos = state.table.pos;
    state.table.data[pos.y][pos.x].presentation = value;
  },
}

Vuex setter/getter :

getters: {
  presentation: (state) => (pos) => {
    return state.table.data[pos.y][pos.x].presentation;
  }
},

我已经确定了以下内容:

• 我将 table.data 状态设置为默认值以使其响应
• 使用 getter 获取数据
• 使用 ajax 调用的 Action
• 在操作中调用带有提交的突变

注意事项:

• ajax 调用需要在一个 Action 中而不是在创建中，因为我要使用来自多个组件的presentation。
• 我更喜欢不需要外部 Vue 插件的解决方案。

问题

• 我错过了什么？
• 我怎样才能以最好的方式解决它？

Answer 1

您需要使用 Vue.set 而不是 state.table.data[pos.y][pos.x].presentation = value;

参见 https://v2.vuejs.org/v2/guide/list.html#Caveats详情

尝试使用以下代码更新您的突变:

if (!state.table.data[pos.y]) {
  Vue.set(state.table.data, pos.y, [])
}
Vue.set(state.table.data[pos.y], pos.x, { presentation: value })

来 self 的一句话，OP(原始海报):

为什么第一次失败是因为我只用 Vue.set 设置了最后一部分 { presentation: value } 因为我已经有了 pos.y 和 pos.x 在另一个 ajax 调用中设置。

为了让 Vue 充分了解我是否需要使用 Vue.set 设置所有尚未设置状态的更改。所以我需要使用 Vue.set 来设置 pos.y 和 pos.x。

另请参阅另一个优秀的answer below .

Vue cannot detect changes to an array when you directly set an item with the index