Question

我在vue项目中添加了一些代码，因此我可以保存用户的状态-无论用户是否登录。如果状态不为null，则要显示导航栏和页脚。我添加了所有vuex import语句。我正在使用对数据库的axios调用，该调用返回一个json response。 response.data返回true / false。如果为true，则将用户重定向到主页。然后，我创建了一个名为currentUser的用户对象，但是我不确定该对象的基础，因此将其设置为null。我需要在整个应用中的几个地方使用state，但尚未设置。请有人帮忙。提前致谢。（代码在下面）

User.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?

currentUser未设置Vuex

2 个答案: