提交mutations之后，state的值没有发生变化

最新推荐文章于 2024-06-02 09:19:10 发布

原创最新推荐文章于 2024-06-02 09:19:10 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

10 篇文章

订阅专栏

博客围绕顶层容器值改变问题展开，指出顶层容器不能直接改变，否则提交后值也不会变化，并给出了相关代码，如 user.js 和 signIn.vue，同时提及了解决方法，但未详细说明。

vuex相关代码（user.js）

let users = [
  {"username":"Lucy","password":"123456","login":false},
  {"username":"qweasd","password":"123456","login":false},
  {"username":"iopjkl","password":"123456","login":false}
];

const state = users[0] || '';

const mutations = {
  [types.GET_USER_INFO](state,username){
    for(let i = 0,len = users.length; i<len; i++){
      if(users[i].username === username){
        state = users[i];
        console.log(state);
      }
    }
  }
};

const getters = {
  userInfo : state => state
};
export default {
  state,
  getters,
  mutations
}

vue相关代码(signIn.vue)

computed:{
    ...mapGetters({
      user:'userInfo'
    })
  }

原因

state是个顶层容器，因此不能直接改变state，而是改变state.user。
否则的话即使提交mutation，state的值也不会发生变化。

解决方法

let users = [
  {"username":"Lucy","password":"123456","login":false},
  {"username":"qweasd","password":"123456","login":false},
  {"username":"iopjkl","password":"123456","login":false}
];

const state =  {user:{...users[0]}};

const mutations = {
  [types.GET_USER_INFO](state,username){
    for(let i = 0,len = users.length; i<len; i++){
      if(users[i].username === username){
        state.user = users[i];
        console.log(state.user);
      }
    }
  }
};

const getters = {
  userInfo : state => state.user
};