Vuex：如何从服务脚本文件状态更改存储状态未定义

Question

我正在尝试在注册期间将 $store 中的 loggedIn 状态更改为 true。但是我得到

TypeError: Cannot read property 'state' of undefined

在线错误

updateLoggedIn(value)  {
        this.$store.state.loggedIn = value;
    },

在AuthenticationService.js.

./store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
    },
    state:  {
        token: '',
        user: null,
        loggedIn: false
    },
...

SignupPage.vue:

...
  methods:  {
    async register(formData) {
      const username = formData.get("Username");
      const email = formData.get("Email");
      const password = formData.get("Password");

      console.log(username);
      console.log(email);
      console.log(password);

      console.log("register()")
      const response = AuthenticationService.register({
        email: email,
        username: username,
        password: password
      }).then((response) => {
        console.log(response)
        console.log(this.$store)
        this.$router.push({
          name: 'ha'
        })
      },
      error =>  {
        console.log("ERROR! signup");
        console.log(error);
      });
    }
  }
...

AuthenticationService.vue:

import api from './api'

const  registeredUsers = []

export default  {
    updateLoggedIn(value)  {
        this.$store.state.loggedIn = value;
    },
    register ( credentials)  {
        registeredUsers.push(credentials);
        registeredUsers.push("nooo")
        console.log(registeredUsers)
        return api().post('register', credentials).then(
            response =>  {
               /* commit("updateLoggedInt", true);*/
                this.updateLoggedIn(true);
               /* this.$store.state.status.registerSuccess = false;*/
                console.log(this.$store);
                return Promise.resolve(response);
            },
            error =>  {
                this.$store.state.status.loggedIn = false;
                return Promise.reject(error);
            }
        )
    },
...

api.js:

import axios from 'axios'
import store from '../../src/store'

export default()  =>  {
    return axios.create({
        baseURL: 'http://localhost:8081',
        headers: {
            Authorization: `Bearer ${store.state.token}`
        }
    })
};

编辑:

仍然遇到问题：

第 8 行

import api from './api'

const  registeredUsers = []
let ref = this

export default  {
    updateLoggedIn(value)  {
        ref.$store.state.loggedIn = value;
    },
...

Answer 1

你的第一个错误是改变状态而不改变。

你的第二个错误是来自另一个组件的调用方法。

解决这个错误后：

我认为未定义 $store 的原因是 this 关键字。

在寄存器的第一行添加这个变量：

let ref = this

然后在请求回调中：

console.log(ref.$store)

也可以使用bind(this)请求回调函数

Answer 2

我设法解决了。

我将此导入添加到 AuthenticationService.js:

import store from '../../src/store/index'

并像这样使用商店对象：

    updateLoggedIn(value)  {
        store.state.loggedIn = value;
    },

Vuex：如何从服务脚本文件状态更改存储状态未定义

Vuex: How to change store state from a service script file state is undefined

javascript

vue.js

vuex