javascript - vuex commit Do not mutate vuex store state outside mutation

Question

1、App.vue

    <p>
      <toast v-model="message.show" type="text" :time="800">{{message.title}}</toast>
      <loading v-model="isLoading"></loading>
      <router-view></router-view>
    </p>
    
    <script>
     import {mapState, mapActions} from 'vuex'
     computed:{
        isLoading: state => state.base.isLoading,
        message: state => state.base.message
     }
    </script>

2、base.js

import {UPDATE_MESSAGE} from '../types'

let state = {
  isLoading: false,
  message:{show:false, title:'hello world!'}
};

const mutations = {
  [UPDATE_LOADING] (state, payload) {
    state.isLoading = payload.isLoading
  },
  [UPDATE_MESSAGE] (state, payload) {
    state.message = payload
  }
};

const actions = {
  updateToast ({commit}, message) {
    commit(UPDATE_MESSAGE,message)
  },
};

export default {
  state,
  mutations,
  actions
}

3、login.js

import {LOGIN, LOGOUT}  from '../types'
import authApi from '../../api/authApi'

const state = {
  userInfo: null,
  token: null
};

const getters = {
  userInfo: state => state.userInfo,
  token: state => state.token
};

const mutations = {
  [LOGIN]: (state, data) => {
    appHelper.setObject('token',data);
    appHelper.setObject('userInfo',data);
    state.token = data;
    state.userInfo = data;
  },
  [LOGOUT]: (state) => {
    appHelper.removeObject('token');
    state.token = null
  },
};

const actions = {
  async sendVerificationCode ({commit}, params){
    await authApi.sendVerificationCode(params).then(result => {
      commit(UPDATE_MESSAGE, {show:true, title:'test ojfoijogroigo'});
    }).catch(function (err) {
      console.log( err);
    });
  },

};

export default {
  state,
  getters,
  mutations,
  actions
}

4、store.js

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

import login from './modules/m_login'
import base from './modules/m_base'

Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({
  modules: {
    base,
    login
  },
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

5、commit(UPDATE_MESSAGE, {show:true, title:'test ojfoijogroigo'});

Toast can be displayed normally, but the error "Do not mutate vuex store state outside mutation" will be reported? What is the reason?

6. Why is this okay?

import store from 'store'
router.afterEach(function (to) {
  store.commit('UPDATE_LOADING', {isLoading: false})
});

7. Goal:

I hope to have a public toast, manage the status through vuex, and decide whether to display it

Answer 1

The state can only be modified in the mutation callback function in Vuex