Question

我在vuex上使用了模块的文件结构。最初我只把一切都存放在一个商店文件中（我不知道我在想什么）。现在我将代码重构为更易于维护的结构，我遇到了如何模仿我以前的状态的问题。

我以前的用户字段状态只是这样的用户对象：

user: {...}

现在我使用了这种格式

const state = {

}

const mutations = {
    fetchUser(state,user){
        console.log(user)
        state = user;
    }
};


const actions = {
    currentUser: ({commit}) => {
        axios.get('/user').then(response => {
            if(response.status == 200){
                commit('fetchUser', response.data.data);
            }
        }).catch(response =>  {

        });

    }
}

我的州转换为：

user:{}

有一个空对象。不应该将用户分配到该用户状态对象中，或者我错过了什么。

Answer 1

来自docs：

在模块的mut和getter中，收到的第一个参数将是模块的本地状态。

所以你的变异应该访问模块对象：

const mutations = {
    setUser(state, user){
        state.user = user; // Assuming you have a user module **
    }
};

**假设你有这样一个用户模块：

const store = new Vuex.Store({
   modules: {
       user: moduleUser,
       // more modules ...
   }
})

突变应该只修改状态。您应该更改逻辑以仅从操作中获取用户数据，而不是从突变本身获取，例如：

const actions = {
    currentUser: ({commit}) => {
        axios.get('/user').then(response => {
            if(response.status == 200){
                var response = response.data.data;
                commit('setUser', response);
            }
        }).catch(response =>  {

        });

    }
}

Vuex状态模块结构

1 个答案: