What is VueX?

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way. This is the introduction on the official website, So what? VueX I understand is to synchronize changes in the value of data, so you need something to store it for global use.

The use of VueX

  • At the heart of every Vuex application is the Store. A “store” is basically a container that contains most of the states in your app. Vuex differs from a purely global object in two ways:

  • Vuex’s state storage is reactive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.

  • You can’t just change the state in the store. The only way to change the state in a store is to commit mutation explicitly. This allows us to easily track each state change, which allows us to implement tools that help us better understand our application.

  • With VueX installed, you can create some states and mutations

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: Increment (state) {state.count++}}}) //store. Log (store.state.count) // -> 1 // Mount to Vue instance (ES6) new Vue({el: '#app', store}) { increment() { this.$store.commit('increment') console.log(this.$store.state.count) } }Copy the code

The core of VueX

  • State: States of a storage store
  • Mutation: The state of a store can only be changed using the mutation method
  • Action: asynchronous operation method
  • Module:
  • Getter: calculates attributes and filters out values
  • The use of state
Const store = new vuex. store ({$store :1000,}, // get the value of counter <h2>{{$store.state.counter}}</h2>Copy the code
  • The use of mutation
mutations: Increment (state) {state. Counter++}, } // Add mutation methods in the method: {addition(){this. limit store.mit ('increment')}Copy the code
  • The use of the action
Const store = new vuex. store ({Info: {name: 'kobe', age:20, height: 1.98}}, Actions :{setTimeout aupdateInfo(context){setTimeout(() =>{context.com MIT ('updateInfo')) },1000) } } methods: {new code.store.mit ('updateInfo') // dispatch: This.$store.dispatch('action method name ', value) //commit: synchronous operation, write: $unlock ($unlock); $unlock ($unlock); $unlock ($unlock); $unlock ($unlock); $unlock ($unlock);Copy the code
  • The use of getter
getters: {// Calculate attributes in vuex, Used to filter data powerCounter (state)} {return state. The counter * state. The counter / / mount < h2 > {{$store. Getters. PowerCounter}} < / h2 >Copy the code
  • The use of the module
ModulesA, mutations, actions, etc. A :modulesA} const modulesA = {state :{name: 'zhangsan'} mutation: {}, getter: {}}Copy the code

Pay attention to

Action and mutation:

  • Action Asynchronous operation, mutation synchronous operation
  • The action commits mutation rather than a direct state change