[vuex] do not mutate vuex store state outside mutation handlers.

[saifobeidat]

I running the app in SRR mode/ Quasar2 and getting this error when trying to commit data:
[vuex] do not mutate vuex store state outside mutation handlers.

MainLayout.vue

<template>
  <q-layout view="hHh lpR fFf">
    <q-page-container>
      <q-page>
        <main>
          <router-view></router-view>
        </main>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyLayout",
  async preFetch({
    store,
    currentRoute,
    previousRoute,
    redirect,
    ssrContext,
    urlPath,
    publicPath,
  }) {

    await store.dispatch("fetchData1");
    return 
  },
});
</script>

test.storejs

const state = {
  data1:null,
};

const mutations = {
  SET_DATA1(state, payload){
    state.data1 = payload;
  }
};
const actions = {
  async fetchData1({ commit, dispatch}) {
    commit('SET_DATA1', [1,2,3])
    },
};
const getters = {
};

export default {
  state,
  getters,
  mutations,
  actions
};

Knowing that this error doesn't appear on SPA, it only appears if the mode is SSR, and it also doesn't appear if I set strict: false but by setting it to false I will not be able to see errors and console logs in the terminal.

[hawkeye64]

I think the issue is in your commit code. You are assigning an array to a variable that has been made observable. So, you cannot replace it.

Change this line of code:

state.data1 = payload;

to:

state.data1.splice(0, state.data1.length, ...payload);

For this to work, your initial state needs to be like this:

const state = {
  data1:[],  // <-- replace the null with []
};

[saifobeidat]

Thanks, it worked