0

I'm having trouble in my Nuxt app. I'm mutation data through the store but get the error as soon as there 2 items in my array that I want to post in my store.

I read some similar question but It seems that it generally because of mutations made elsewhere from the store. In my case I'm using the mutation from VueX. I'm getting stuck with no idea how to fix it.

See what happen (gif)

In my store:

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

in my file (I've simplified it)

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

I got not idea why I got this issue. Any help would be appreciated

luminous8
  • 1
  • 1

2 Answers2

0

It is because you have to make changes of state (mutations) through the commit method of vuex, you are actually using the mutation as a normal method

Look at the documentation: https://vuex.vuejs.org/guide/mutations.html#mutations

Andrew G
  • 54
  • 3
  • Thanks a lot for your answer. I'm not sure to get what I did wrong. As in the doc https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components, I'm using the mapMutations helper that does like a commit. Could you provide an example how it should be done? Thanks again Andrew – luminous8 Nov 14 '19 at 20:33
-1

Update on this topic. I finally fixed this issue by updating the method to 

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

Which honestly seems weird as there no example like this in the doc.

Answer found here

luminous8
  • 1
  • 1
  • It is in the documentation, but this isn't a mutation. This is an action calling a mutation. Check out actions and mutations in the Vuex documentation. – Arc Nov 18 '19 at 00:01
  • Hey Thanks for replying! What I understand from the doc is that actions should be use for async calls, which is not the case in code. So I assume the mutations are what I should use, but when I read the documentation that precisely what I did in the first place (https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components). Could you provide an example of how you do it? It would be really appreciated. Thanks! – luminous8 Nov 19 '19 at 06:26