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

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})
});

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

伊谢尔伦2711 hari yang lalu823

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

membalas semua(1)saya akan balas