商店更改时组件未更新-Vuex

Question

TLDR：

我录制了一段视频，解释了我的问题是否有帮助。 https://youtu.be/Qf9Q4zIaox8

导航栏组件不会在商店更改时更新。

我使用v-if和v-else将组件分为两部分。 当用户登录时，将显示v-if，而当用户未登录时，将显示v-else。

当我登录时，服务器进行身份验证，并且客户端对商店进行更改并设置用户和客户端令牌。 设置此属性后，它将处于“ userIsLoggedIn”状态的属性设置为true-此属性是在导航栏组件中计算的。 由于未知的原因，一旦用户登录（尽管isLoggedIn属性为true），Navbar组件就不会更新，除非我刷新页面。

导航栏组件：

 <template> <div class="navbar"> <div class="container"> <div class="navbar-brand"> <h1 class="navbar-item"> <router-link to="/" class="has-text-black">Logo</router-link> </h1> </div> <div class="navbar-menu"> <div class="navbar-end" v-if="isLoggedIn"> <div class="navbar-item"> <router-link to="/play" class="has-text-black">Play</router-link> </div> <div class="navbar-item"> {{user.balance.toFixed(2)}} </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> {{user.username}} </a> <div class="navbar-dropdown"> <div class="navbar-item">Profile</div> <div class="navbar-item">Deposit</div> <div class="navbar-item" @click="logout">Logout</div> </div> </div> <div class="navbar-item"> FAQ </div> </div> <div class="navbar-end" v-else> <div class="navbar-item"> <router-link to="/login" class="has-text-black">Login</router-link> </div> <div class="navbar-item"> <router-link to="/register" class="has-text-black">Register</router-link> </div> <div class="navbar-item">FAQ</div> </div> </div> </div> <!-- container --> </div> <!-- navbar --> </template> <script> import {mapGetters} from "vuex"; export default { name: "Navbar", data() { return { user: this.$store.state.user, } }, computed: { ...mapGetters([ "isLoggedIn", ]) }, methods: { logout() { this.$store.dispatch("setToken", null); this.$store.dispatch("setUser", null); this.$router.push({ path: "/" }) } } } </script> 

Vuex商店：

 import Vue from "vue"; import Vuex from "vuex"; import createPersistedState from "vuex-persistedstate" Vue.use(Vuex); export default new Vuex.Store({ strict: true, plugins: [ createPersistedState() ], state: { token: null, user: null, isUserLoggedIn: false, }, getters: { isLoggedIn(state) { return state.isUserLoggedIn; } }, mutations: { setToken(state, token) { state.token = token; if (token) { state.isUserLoggedIn = true; } else { state.isUserLoggedIn = false; } }, setUser(state, user) { state.user = user; } }, actions: { setToken ({commit}, token) { commit("setToken", token); }, setUser ({commit}, user) { commit("setUser", user); } } }) 

登录组件：

 <template> <div class="hero is-large"> <div class="container"> <div class="hero-body"> <div class="field"> <div class="notification is-warning" v-show="error">{{error}}</div> </div> <h1 class="title">Login</h1> <div class="field"> <label for="username" class="name">Username</label> <input type="text" class="input" name="username" v-model="username"> </div> <div class="field"> <label for="username" class="name">Password</label> <input type="password" class="input" name="password" v-model="password"> </div> <div class="field"> <button class="button is-link" @click="login" v-bind:class="{'is-loading': pending}">Login</button> </div> </div> </div> </div> </template> <script> import AuthenticationService from "../Services/AuthenticationService"; export default { name: "Login", data () { return { username: "", password: "", error: null, pending: false, } }, methods: { async login () { try { // SET LOADING SPINNER this.pending = true; // API REQUEST const response = await AuthenticationService.login({ username: this.username, password: this.password, }); console.log(response); // CLEAR FORM this.pending = false; this.username = ""; this.password = ""; this.$store.dispatch("setToken", response.data.token); this.$store.dispatch("setUser", response.data.user); this.$router.push({ name: "Landing" }) } catch (error) { console.log(error); } } } } </script> 

Answer 1

我认为我发现了问题所在。当用户登录时，您没有将isUserLoggedIn设置为true。因此，请执行一个操作，然后在用户成功登录时进行更改以将isUserLoggedIn更改为true。

行动

setUserLogged ({commit}) {
 commit("setUserLogged", true);
}

突变

setUserLogged(state, payload) {
 state.isUserLoggedIn = true
}

然后在“登录”组件中的这些行中更改以下内容：

this.$store.dispatch("setToken", response.data.token);
this.$store.dispatch("setUser", response.data.user);

对此：

this.$store.dispatch("setToken", response.data.token);
this.$store.dispatch("setUser", response.data.user);
this.$store.dispatch("setUserLogged");