Vuex 不会改变状态

Question

我正在尝试将 authenticated 从 false 切换到 true，state 中的属性，它不起作用。

我的代码来自 store.js

state() {
    return{
       authenticated : false,
       user : {}
    }
},

getters : {
    authenticated(state){
        return state.authenticated
    }
},

mutations : {
    set_authenticated(state, value){
        return state.authenticated = value
    }
},

我更新的代码来自 login.vue（脚本）

data() {
    return {
       allerrors : [],
       success : false,
       data: {
           email : "",
           password : ""
       }
    }
},

methods : {
    login: function() {
    this.$store
        .dispatch("login", this.data)
        .then(response => {
                            this.allerrors = [],
                            this.success = true,
                            this.data = {}
                            alert(response.data)
                        })
                        .catch((error) => {
                            this.allerrors = error.response.data.error
                            this.success = false
                            alert(allerrors)
                        })
    },

我更新的操作是：

 async login({ commit }, data) {
        await axios.post('login', data)
         .then(response => {
           commit('set_authenticated',true);
           })
         .catch((error) => {
           this.allerrors = error.response.data.error
           this.success = false
          })
    }

Answer 1

突变不应有 return 语句。应该是这样

mutations : {
    set_authenticated(state, value){
        state.authenticated = value
    }
},

Answer 2

这里有几个问题：

首先，如果这是您的 store.js 文件的完整代码，那么您缺少对 createStore()（对于 Vue 3）或 new Vuex.Store()（对于 Vue 2）的调用

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Source

第二个问题是您不应该从您的单文件组件中进行更改。典型流程为：

组件调度操作
操作提交突变
突变更新状态

您正在尝试直接从组件提交变更。

您需要向 store.js

添加一个操作

async login({ commit }, userData) {
  await axios.post('login', userData)
   .then(response => {
     commit('set_authenticated',true);
     })
   .catch((error) => {
     this.allerrors = error.response.data.error
     this.success = false
    })
   }

突变：

mutations : {
    set_authenticated(state, value){
        state.authenticated = value
    }
},

然后你的 Login.vue 会变成这样：

  methods: {
    login: function() {
      this.$store
        .dispatch("login", { userData })
        .then(() => )) // whatever you want to do here.
        .catch(err => console.error(err));
    }
  }

Vuex 不会改变状态

Vuex is not mutating the state

vue.js