javascript - vuex 提交 不要在突變之外改變 vuex 儲存狀態

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能正常顯示，但會報Do not mutate vuex store state outside mutation 錯誤？這是什麼原因？

6、為什麼這個可以？

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

7、目標：

我希望有一個公開的toast，透過vuex管理狀態，決定是否顯示

Answer 1

Vuex 中對 state 的修改只能在 mutation 的回呼函數裡