This is the first day of my participation in the August More text Challenge. For details, see: August More Text Challenge

In actual combat

  • Project creation (via VueCLI)
    • Vue Create Project name
    • Select project configuration dependencies
    • CD Project name (git prompt appears, select yes)
    • npm run serve

Build the project framework

The authentication

  • Without authentication, it’s like having only one door at home, but without walls, you can go in directly from the side

Vuex

  • A state management pattern developed specifically for vue.js applications.
  • Apply to: pass values between multiple components

Vuex installation and introduction

Vuex-State

  • Through $store. State. The count
    • $store.state stores common data
    • Note: You don’t need to write this in views, but you do in js

Vuex-Mutation

  • The only way to change the state in Vuex’s Store is to submit mutation
    • Mutations define events of different names that are triggered by COMMIT (event name)
  • Payload
    • Commit (event name, parameter)
      • In most cases, payload should be an object. payload.count

Vuex-Action

  • Separate synchronous and asynchronous operations. Actions stores asynchronous operations and Mutatios stores synchronous operations.
  • $store.dispatch(‘jiaHandle’,{count:5, delay:2000});
  • Context is the same as store

Authentication – Login status store

  • Stored in vuex, stored in the local localStorge, and then read from it to assign variables in VUex
    • Because the page is refreshed, the data in VUEX is lost.
 // store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 user: null
 },
 mutations: {},actions: {},modules: {}})Copy the code

Identity authentication – Verifies the page access permission

  • Through the meta setting, and then through the route navigation guard interception operation
  • Only the path to that needs to be accessed, none of which needs to be verified or all of which need to be verified pass can be skipped.
    • Through the array
// router/index.js
 router.beforeEach((to, from, next) = > {
 console.log('to:', to)
 console.log('from:'.from)

 // The official example checks whether the route requires login
 if (to.matched.some(record= > record.meta.requiresAuth)) {
 // The to route requires a login status to detect whether the user is logged in
 }
 next()
 })
Copy the code