Pinia Action无法更新状态：调用login时提示user未定义

错误的核心原因是axios回调里的普通函数改变了this的指向：你在then里使用function(response) {}这类普通函数时，它的this并不指向Pinia的store实例（严格模式下会变成undefined），所以执行this.user = user时自然会触发"Cannot set properties of undefined"错误。

两种有效解决方法： #

方法1：改用箭头函数

箭头函数不会绑定自身的this，会继承外层作用域（也就是login方法的this，即Pinia store实例）的this：

login(email, password) {
    axios.post('http://127.0.0.1:8000/api/login', {
        email: email,
        password: password
    })
    // 将普通函数替换为箭头函数
    .then((response) => {
        const user = response.data.data.user
        const token = response.data.data.access_token

        this.user = user
        this.token = token
        localStorage.setItem('user', JSON.stringify(user))
        localStorage.setItem('token', token)
        toaster.success(response.data.message)
        router.push('/dashboard/home')
    })
    .catch((error) => { // catch回调也建议同步改为箭头函数
        console.log(error)
        //toaster.error(error.response.data.message)
    })
}

方法2：提前保存store的this到变量

在login方法开头把store实例的this存入变量，后续回调里用这个变量访问state：

login(email, password) {
    // 保存store实例的this引用
    const store = this
    axios.post('http://127.0.0.1:8000/api/login', {
        email: email,
        password: password
    })
    .then(function(response) {
        const user = response.data.data.user
        const token = response.data.data.access_token

        // 用store代替this访问state
        store.user = user
        store.token = token
        localStorage.setItem('user', JSON.stringify(user))
        localStorage.setItem('token', token)
        toaster.success(response.data.message)
        router.push('/dashboard/home')
    })
    .catch(function(error) {
        console.log(error)
        //toaster.error(error.response.data.message)
    })
}

两种方法都能解决问题，推荐用第一种箭头函数的写法，更简洁符合现代JavaScript编码习惯。

内容的提问来源于stack exchange，提问作者Norest