Question

我的Nuxt应用出现问题。我正在通过商店对数据进行突变，但是一旦要在我的商店中发布数组中的2个项目，就会收到错误消息。

我读了一个类似的问题，但似乎通常是由于商店其他地方发生的突变。就我而言，我使用的是VueX的突变。我不知道如何解决它。

在我的商店中：

export const namespaced = true;

export const state = () => ({
  tags: null,
  ratings: null,
});

const getters = {
  getRatings: (state) => {
    return state.ratings;
  },
  getTags: (state) => {
    return state.tags;
  },
};

const mutations = {
  set_Ratings: (state, value) => {
    state.ratings = value;
  },
  set_Tags: (state, value) => {
    state.tags = value;
  },
};

export default {
  state,
  mutations,
  getters,
};

在我的文件中（我已对其进行了简化）

<template>
  <div>
    {{ followers }}
    {{ getTags }}
    ---
    <div
      @click="handle"
    >
      Click here to add to store
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';

export default {
  components: {
  },
  data() {
    return {
      followers: [],
    };
  },
  computed: {
    ...mapGetters({
      getTags: 'filters/getTags',
    }),
  },
  mounted() {
  },
  methods: {
    ...mapMutations({
      setTag: 'filters/set_Tags',
    }),
    handle() {
      const test = Math.random().toString(36);
      this.followers.push(test);
      this.setTag(this.followers);
    },
  },
};

</script>

<style>
</style>

我不知道为什么会遇到这个问题。任何帮助将不胜感激

Answer 1

这是因为您必须通过vuex的commit方法进行状态（突变）的更改，实际上您是在使用突变作为常规方法

查看文档：{{3}}

Answer 2

有关此主题的更新。我终于通过将方法更新为

解决了此问题

setTag(commit, tags) {
  commit('filters/set_Tags', tags);
}

说实话，这看起来很奇怪，因为文档中没有这样的例子。

Answer found here

Nuxtjs抛出“请勿在变异处理程序之外变异vuex存储状态”

2 个答案: