Laravel+Vue 问答平台项目实战前端 - 前端状态管理

本文将引入Vuex来管理全局状态。Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 官方文档地址

安装

在项目根目录下执行命令

npm install vuex --save

npm install es6-promise --save

等待安装完成即可。

使用

在构建前端项目时，已经创建了用于状态管理的store 目录

store用户状态管理

​ store/index.js是状态管理的输出文件

​ store/mutation-types.js保存状态管理中用到事件类型

​ store/modules保存各个模块的状态

​ store/modules/user.js保存用户状态

编辑状态事件类型

编辑src/store/mutation-types.js文件

export const SET_TOKEN = 'SET_TOKEN'
export const SET_USERINFO = 'SET_USERINFO'

目前用到了两种事件类型，分别是设置令牌token事件，设置用户信息事件

编辑用户模块

用户模块中封装了一些关于用户相关的状态管理，编辑src/store/modules/user.js文件

import storage from '../../utils/store'
import { registerApi, loginApi, userInfoApi, logoutApi } from '../../api/user'
import { SET_TOKEN, SET_USERINFO } from '../mutation-types'

const user = {
  state: {
    token: '',
    userInfo: null
  },

  mutations: {
    [SET_TOKEN]: (state, token) => {
      state.token = token
    },
    [SET_USERINFO]: (state, userInfo) => {
      state.userInfo = userInfo
    },
  },

  actions: {
    // 注册
    Register ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        registerApi(userInfo).then(response => {
          if (response.code === 0) {
            storage.set(response.data.token)
            commit(SET_TOKEN, response.data.token)
          }
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 登录
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        loginApi(userInfo).then(response => {
          if (response.code === 0) {
            storage.set(response.data.token)
            commit(SET_TOKEN, response.data.token)
          }
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo ({ commit }) {
      return new Promise((resolve, reject) => {
        userInfoApi().then(response => {
          if (response.code === 0) {
            commit(SET_USERINFO, response.data.user)
          }

          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 登出
    Logout ({ commit }) {
      return new Promise((resolve) => {
        logoutApi().then(() => {
          commit(SET_TOKEN, '')
          commit(SET_USERINFO, null)
          storage.remove(storage.ACCESS_TOKEN)
          resolve()
        }).catch(() => {
          resolve()
        }).finally(() => {
        })
      })
    }

  }
}

export default user

输出状态管理

src/store/index.js是状态管理的输出文件，编辑此文件

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

import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

引入Vuex

最后，需要修改src/main.js文件，来引入Vuex

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

上一篇 Laravel+Vue 问答平台项目实战前端 - 前端请求

下一篇 Laravel+Vue 问答平台项目实战前端 - 设计导航栏