如何正确使用 vuex store？

Question

我正在尝试以下操作：

我有一个使用 axios 从休息中获取结果的登录表单 api。当提交正确的数据时，我会返回所有用户数据，当提交错误的数据时，我会收到错误消息。

我想将用户数据保存到全局存储中，以便在我的 vue 应用程序中使用。我认为 vuex 可以用于这个场景。

在我的 main.js 中，我定义了 vuex 和一个变异函数来获取用户数据。

import { createStore } from 'vuex'
// other imports

const store = createStore({
  state () {
    return {
      userData: {}
    }
  },
  mutations: {
    addUserData (state, data) {
      state.userData = data
    }
  }
})


createApp(App)
  .use(router, store)
  .mount('#app')

在我的 Login.vue 中，我正在尝试使用我之前创建的商店：

但是，当尝试对商店 addUserData 使用变更时，我在控制台中得到了 Uncaught (in promise) ReferenceError: store is not defined。我现在如何正确使用该功能？

我也试过使用 this.$store.state.addUserData，结果出现了不同的错误

<template>
  <div class="container content">
    <h1>Login</h1>
    <form @submit.prevent="login">
      <div class="mb-3">
        <label for="username" class="form-label">Username:</label>
        <input type="username" id="username" v-model="username" class="form-control" placeholder="Username">
      </div>
      
      <div class="mb-3">
        <label for="password" class="form-label">Password:</label>
        <input type="password" id="password" v-model="password" class="form-control" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;">
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>

    </form>

  </div>
</template>

<script>
import axios from 'axios'

export default {

  data(){
    return {
      username: '',
      password: '',
    }
  },

  methods: {

    async login() {

      axios.get('https://localhost:9443/isValidUser', 
      {
        params: {
          user: this.username,
          pass: this.password,
        }
      }).then(response => {
        console.log(response.data)

        if(response.data[0].username) {

          console.log("Hello " + response.data[0].username)
          store.commit('addUserData', response.data[0])

        } else {
          console.log("Login failed")
        }
      })

    }
  }
}
</script>

Answer 1

我“一次”使用多个插件的解决方案是：

const app = createApp(App)
[store, router].forEach((p) => app.use(p));
app.mount('#app);

如果你有很多插件，它会很方便，如果没有，你可以随时做:

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

两个插件就可以了

所以最后你的商店没有被使用，因此错误

如何正确使用 vuex store？

How Do I correctly use vuex store?

vue.js

vuex