Vuex 操作与 ajax 未在计算中更新

Question

我将 Vue 与 Vuex 一起使用。在一种情况下，我使用 Ajax 来获取表示值。路上的某个地方，可能是在computed不再有反应。

在我的组件中：

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 并返回一个承诺。我也犯了一个突变。

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 获取器：

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

我已经确定以下几点：

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

笔记：

• ajax 调用需要在一个操作中而不是在创建中，因为我将使用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 })

我，OP（原海报）的一句话：

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

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

另请参阅下面的另一个出色答案。

当您直接使用索引设置项目时，Vue 无法检测到数组的更改