Vuex – Basics and use of auxiliary functions

1. Why did VUEX appear and what problems did it solve?

Parameters passed between components include parent-child values, sibling values, and ancestor and grandchild values, which are easier to use when there are fewer levels. However, when there are many levels and nesting is troublesome, it will be relatively tedious and difficult to maintain when using vuEX. Therefore, VUEX is proposed to extract the shared state of components and manage it in a global singleton mode. The component tree forms a giant “view”. No matter where in the tree, any component can get state or trigger behavior.

2. When to use Vuex?

Simple and small projects do not need to use it, if it is a large single-page application, it can be used.

3. The core 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.

Features: 1. The state storage of Vuex is responsive. When the Vue component reads the state from the Store, if the state in the store changes, the corresponding component is updated efficiently accordingly.

2. You can’t directly change the state in the Store. The only way to change the state in a store is to commit mutation explicitly.

4. Basic usage of Vuex?

To create the store folder and create index.js, remember to call the main.js file. Index.js is mainly (partial parsing will be done later) :

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

Vue.use(Vuex)

const store = new Vuex.Store({
   state:{
       userName: 'phoebe',
       age: '23',
       habit: 'dance'State mutations: {getUserName (state,value) {state.username = value}}, { getUserName (context,value) { context.commit('getUserName',value)
       }
   }
})

export default store
Copy the code

The simple implementation stores some properties in the store, and then some components call them. (Simply take)

 //store/index.js
 state:{
        userName: 'phoebe',
        age: '23',
        habit: 'dance'} // app.vue // 1.$store.state.age
  this.$store.state.habit
  this.$store.state.userName //2. Use the auxiliary function mapState import {mapState} from'vuex'Computed: {//this.habit :dance mapState(['habit'.'age'.'userName'])},Copy the code

How many ways can you modify the state property?

1.commit mutations

// store/index.js mutations: { getUserName (state,value) { state.userName = value } }, // app.vue // 1. Simple commit this.$store.commit('getUserName'.'phoebe') // 2. Map methods in the component to store.mit using mapMutations. Call import {mapMutations} from'vuex'Methods: {... mapMutations(['getUserName']), 
      init () {
        //this.$store. State. UserName:'change phoebe to MM'This.getusername ();'change phoebe to MM')}}Copy the code

2. Use the action

Javascript mutations: {getUserName (state,value) {state.userName = value}}, // action is to submit mutation actions: { getUserName (context,value) { context.commit('getUserName',value)}} // app.vue //$store.dispatch('getUserName'.'change name by action'Use the mapActions helper function to map the component's methods to store.dispatch by calling import {mapActions} from'vuex'methods: { ... mapActions(['getUserName']),}init (){
      //this.$store. State. UserName:'change phoebe to MA'This.getusername ();'change phoebe by MA')}Copy the code

To sum up, continue and more