javascript - vuex commit Jangan mutasi keadaan kedai vuex di luar mutasi

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. log masuk.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. kedai.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'});

Roti bakar boleh dipaparkan seperti biasa, tetapi ralat Jangan mutasi keadaan kedai vuex di luar mutasi akan dilaporkan? Apakah sebabnya?

6. Mengapa ini boleh berlaku?

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

7

Saya berharap untuk mengadakan toast awam, mengurus status melalui vuex, dan memutuskan sama ada untuk memaparkannya

Answer 1

Keadaan hanya boleh diubah suai dalam fungsi panggil balik mutasi dalam Vuex