This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

preface

After working for a period of time, I feel that there are more and more things that I can’t do. Today, I reviewed the basic knowledge of VUE again and made a small record here for the convenience of checking and sharing in the future. The following is a summary of the basics of Vuex. Routing to intercept

Route interception is implemented by navigation guard beforeEach, which can be configured with the corresponding navigation guard. The purpose is to ensure that users cannot enter certain pages without relevant credentials. (Why use route interception? This is because through routing interception can increase the security of our website. With routing interception, we have to check whether we have permission when we jump to any page, which makes our website more secure.

redirect

Redirect, automatically redirect to/B when we want to access/A (this is usually used when we define the use of routes)

The alias

Alias: if the url is /a and the alias is /b, then /a or /b can be accessed to the same page.

Vuex

Vuex is a warehouse that stores the data of vUE components, which we call state, which is used in our slightly complicated projects. Using Vuex will greatly improve our development efficiency and help us better control the data in the project

How to use

const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

const app = new Vue({
  el: '#app',
  store
})
Copy the code

state

State stores the data in the component, which can be accessed directly by any component. This solves the problem that data in vUE can only be used in this page

this.$store.state
Copy the code
Const component = {computed: {state name () {return this.$store.state.state name}}}Copy the code

mutation

Mutation is the only operation to change state, and it can only be a synchronous operation (you must use this method to change the value in VUEX)

const store = new Vuex.Store({ mutations: {setState (state, payload) {// this.$store. State}}})Copy the code

action

It is used to request the background interface, perform asynchronous operations, and finally submit the data to mutation to set the state

const store = new Vuex.Store({ actions: {getData (context, payload) {// Payload is the data that is passed in the dispatch action. Context is a store.Copy the code

getters

Getters can dynamically fetch data from state, the name of this.$store.getter (handy, but not recommended).

Const store = new vuex. store ({getters: {getters name (state, getters) {return value}}})Copy the code

conclusion

The more I work, the less I feel I know. One is that I have been building wheels and have no time to learn new knowledge. The other is that I have a fixed thinking and have been used to working in a certain way and don’t want to change