Laravel+Vue Q&A platform project actual combat front end – front end state management

This article introduces Vuex to manage global state. Vuex is a state management mode developed specifically for vue.js applications. Centralized storage is used to manage the state of all components of an application and rules ensure that the state changes in a predictable way.

Vuex official document address

The installation

Execute the command in the project root directory

npm install vuex --save

npm install es6-promise --save

Wait until the installation is complete.

use

When you build the front end project, you have created a Store directory for state management

Store Manages user status

Store /index.js is the output file for state management

Store /mutation-types.js saves the event types used in state management

Store /modules Stores the state of each module

Store /modules/user.js saves the user state

Edit the status event type

Edit the SRC /store/mutation-types.js file

export const SET_TOKEN = 'SET_TOKEN'
export const SET_USERINFO = 'SET_USERINFO'
Copy the code

Currently, two types of events are used, namely, token setting event and user information setting event

Edit user module

User module encapsulates some about user related state management, edit the SRC/store/modules/user. The js file

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
    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
    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)
        })
      })
    },

    // Get user information
    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
    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
Copy the code

Output state management

SRC /store/index.js is the output file for state management. Edit this file

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

import user from './modules/user'

Vue.use(Vuex)

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

The introduction ofVuex

Finally, the SRC /main.js file needs to be modified to introduce 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')
Copy the code

Laravel+Vue q&A platform project actual front end – front end request

The next Laravel+Vue q&A platform project actual combat front – design navigation bar