突然変異が状態で値を設定しない

Question

mutationsで値を設定しましたが、状態オブジェクトの値は更新されません。 mutationsオブジェクト内に新しい変数を作成します。

mutations.js：

const mutations = { 
    setUser(state, user) { 
    state.user = user; // eslint-disable-line no-param-reassign 
    }, 
    setToken(state, token) { 
    state.token = token; // eslint-disable-line no-param-reassign 
    }, 
    setAuthenticated(state, authenticated) { 
    state.authenticated = authenticated; // eslint-disable-line 
    }, 
}; 


export default { 
    mutations, 
}; 

state.js：

const state = { 
    callingAPI: false, 
    activeSidebar: true, 
    searching: '', 
    authenticated: null, 
    user: null, 
    token: null, 
    userInfo: { 
    messages: [], 
    notifications: [], 
    tasks: [], 
    }, 
}; 

const getters = { 
    isAuthenticated: (state) => { // eslint-disable-line 
    return state.authenticated; 
    }, 
    isActiveSidebar: (state) => { // eslint-disable-line 
    return state.activeSidebar; 
    }, 
}; 

export default { 
    state, 
    getters, 
}; 

store.js：

import Vue from 'vue'; 
import Vuex from 'vuex'; 
import state from './state'; 
import mutations from './mutations'; 

Vue.use(Vuex); 

export default new Vuex.Store({ 
    modules: { 
    state, 
    mutations, 
    }, 
}); 

Iはcommit関数で値を更新します。例えば：this.store.commit('setAuthenticated', true);

import { mapMutations } from 'vuex'; 
import store from '../store'; 

export default { 
    computed: { 
    ...mapMutations([ 
     'setAuthenticated', 
     'setUser', 
     'setToken', 
    ]), 
    }, 
    store, 
    login(context, creds) { 
    context.$http.post(LOGIN_URL, JSON.stringify(creds)).then(
     (response) => { 
     if (response.status === 200) { 
      const bodyText = response.bodyText.split('\n'); 
      const token = bodyText[0].split(' '); 
      let redirect = bodyText[1]; 
      redirect = redirect.substring(redirect.indexOf('[') + 1, redirect.indexOf(']')); 
      this.store.commit('setToken', token[1]); 
      this.store.commit('setAuthenticated', true); 
      ........... 
     }); 
     } 

それはstateオブジェクトにnull値を更新する代わりにmutationsオブジェクトに新しい変数を作成することになっていませんか？

Answer 1

あなたはモジュールを悪用しているようです。私はあなたが実際にそれらを使用しようとしていないと仮定します。 stateインポートでは意図しないプロパティのネストもあります。

store.js

import Vue from 'vue'; 
import Vuex from 'vuex'; 
import {state,getters} from './state'; 
import mutations from './mutations'; 

Vue.use(Vuex); 

export default new Vuex.Store({ 
    state, 
    getters, 
    mutations, 
});