currentUser 没有使用 Vuex 设置

Question

我在我的 vue 项目中添加了一些代码，以便我可以保存用户的状态——即他是否登录。如果状态不为空，我想显示导航栏和页脚。我添加了所有的 vuex 导入语句。我正在使用 axios 调用数据库，它返回一个 json response。 response.data 返回真/假。如果为真，我将用户重定向到主页。然后我创建了一个名为currentUser 的用户对象，但我不确定它的基础是什么，所以它被设置为null。我需要在整个应用程序的几个地方使用state，但它没有设置好。请有人帮忙。提前致谢。 （代码如下）

用户.js：

            import JwtDecode from 'jwt-decode'

        export default class User {
          static from (token) {
            try {
              let obj = JwtDecode(token)
              return new User(obj)
            } catch (_) {
              return null
            }
          }

          
              constructor ({username}) {
            this.username = username 
            
          }

        
        }

App.vue：

            <template>
          <div id="app">
            <template v-if="currentUser">
              <Navbar></Navbar>
            </template>
            <div class="container-fluid">
              <router-view></router-view>
              <template v-if="currentUser">
                <Foot></Foot>
              </template>
            </div>
          </div>
        </template>


        <script>
        import { mapGetters } from 'vuex'
        import Navbar from '@/components/Navbar'
        import Foot from '@/components/Foot'

        export default {

        name: 'App',
        components: {
          Navbar,
          Foot
        },
        computed: {
            ...mapGetters({ currentUser: 'currentUser' })
          },
  

mutation_types.js：

                        export const LOGIN = 'LOGIN'
                        export const LOGOUT = 'LOGOUT'

auth.js：

            /* global localStorage */

        import User from '@/models/User'
        import * as MutationTypes from './mutation_types'

        const state = {
          user: User.from(localStorage.token)
        }


        const mutations = {
            [MutationTypes.LOGIN] (state) {
              state.user = User.from(localStorage.token)
            },
            [MutationTypes.LOGOUT] (state) {
              state.user = null
            }
          }
          
          const getters = {
            currentUser (state) {
              return state.user
            }
          }
          
          const actions = {
            login ({ commit }) {
              commit(MutationTypes.LOGIN)
            },
          
            logout ({ commit }) {
              commit(MutationTypes.LOGOUT)
            }
          }
          
          export default {
            state,
            mutations,
            getters,
            actions
          }

Answer 1

用户存储应该只设置默认状态。在请求验证用户之后。您应该使用actions 和mutations 来设置用户状态。通过store.dispatch("user/login", user) 调用操作，返回new User(obj)。

    let obj = JwtDecode(token)
    const user = new User(obj)
    store.dispatch("user/login", user)

    const actions = {
            login ({ commit }, userObject) {
              commit(MutationTypes.LOGIN, userObject)
            },
    
            logout ({ commit }) {
              commit(MutationTypes.LOGOUT)
            }
    }

    const mutations = {
            [MutationTypes.LOGIN] (state, user) {
              state.user = user;
            },
            [MutationTypes.LOGOUT] (state) {
              state.user = null
            }
    }

另一方面，你有愚蠢的吸气剂。这意味着他们只是返回状态。您可以直接在状态之外调用用户对象。如果您想在返回之前修改返回值，请使用 getter。

Answer 2

我看了看，您似乎使用 '=' 而不是 Vue.set() 来设置您的状态变量。

参考答案：vuex - is it possible to directly change state, even if not recommended?