Question

/pages/index.vue

-2

/store/index.js

computed: {
    escapeValues() { return this.$store.state.escapeOnline.splice(0, 1); }
}

当我尝试运行/pages/index.vue时，无法保留数组的第一个元素。我有这个错误：export const state = () => ({ escapeOnline: [{id: 1, name: 'titi'}, {id: 2, 'toto'}], })

Answer 1

如果要更改状态，则必须使用突变。

如果只想获取第一个元素，则可以使用扩展运算符或方法切片。

请参见以下示例：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    escapeOnline: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }, { id: '6' }],
  },
  mutations: {
    removeFirst(state) {
      state.escapeOnline.splice(0, 1);
    },
  },
});

<template>
  <div id="app">
    <div>
      {{ $store.state.escapeOnline }}
    </div>
    <div>
      <button @click="showFirst">Show First in console.log</button>
      <button @click="removeFirst">Remove First</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    removeFirst() {
      this.$store.commit('removeFirst');
    },
    showFirst() {
      let [first] = this.$store.state.escapeOnline;
      console.log(first);
    },
  },
};
</script>

Vuex-不要使用getters在变异处理程序之外变异vuex存储状态

1 个答案: