javascript - vuex commit Ne pas muter l'état du magasin Vuex en dehors de la 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. connexion.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 peut être affiché normalement, mais l'erreur Ne pas muter l'état du magasin vuex en dehors de la mutation sera signalée ? Quelle est la raison?

6. Pourquoi est-ce possible ?

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

7. Objectif :

J'espère porter un toast public, gérer le statut via vuex et décider de l'afficher ou non

Answer 1

L'état ne peut être modifié que dans la fonction de rappel de mutation dans Vuex