[vuex]

material

Shang Silicon Valley Video: https://www.bilibili.com/video/BV1Zy4y1K7SH?p=108
Official Website: https://v3.vuex.vuejs.org/zh/

Install

注意：The version of vue is one version different from the version of vuex, that is:

• Vue2 needs to use vuex3
• Vue3 needs to use vuex4

First look at the version of vue you are using: open the project package.jsonfile and see the vue2 currently used, so you need to install vuex3

to install the vuex3 command; for other versions, replace 3 in the command below

npm install vuex@3

use

quick start

Create a new store directory at the same level as App.vue:

Create a new index.js file in the store directory, the content is as follows:

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

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state: {
    
    
    //类似vue中的data，时k-v键值对，如：
    //name:""
  },
  actions:{
    
    
  	//函数名一般使用驼峰命名法
  	//可以收到两个个参数：上下文信息、传的参数；一般调用commit在mutations中处理state中的数据，如：
  	//updateName(context, val) {
    
    
    //  context.commit('UPDATE_NAME')
    //}
  },
  mutations: {
    
    
	//一般使用大写字母命名
	//可以收到两个参数，state、传的参数；用于处理state中的数据，如：
	//UPDATE_NAME(state, val) {
    
    
    //  state.name = val
    //}
  },
  getters: {
    
    
    //类似vue的computed
	//可以收到两个参数：state、整个getters
	//getNameLength(state, getters) {
    
    
	//  return state.name.length;
	//}
  }
})

Introduce the file just created in main.js: (./store/index can be abbreviated as ./store)

Basic usage (non-modular):

example:

For example, we use the following, replacing /store/index.js:

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

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state: {
    
    
    sum: 0
  },
  actions:{
    
    
  	add(context,val){
    
    
    	context.commit("ADD",val)
    }
  },
  mutations: {
    
    
    ADD(state,val){
    
    
        state.sum += val;
    },
})

And use it in the methods of a certain module (denoted as A module):

methods:{
    
    
  add(){
    
    
    this.$store.dispatch("add",this.optionVal)
  }
}

Specific workflow:

Of course, if the logic is relatively simple, you can also directly call the method in the mutation in the method of the module. At this time, you need to call the $store.commit method.
For example, in the above example, put in module A can be written as:

this.$store.commit("ADD",this.optionVal)

helper function

import

Premise: You need to introduce the corresponding function: (Which one is used to introduce which one)

import {
    
    mapState, mapGetters, mapActions, mapMutations} from "vuex";

parameter

There are generally two parameters of mapXxx:

• Object, the approximate corresponding relationship is: (the following is a string, which cannot be abbreviated) applicable 重命名when needed
  
• Array, which means that the key and value of the above objects are the same: (note the single quotes.)
  

mapState

The effects of the three methods in the figure below are equivalent:

mapGetters

The effects of the three methods in the figure below are equivalent:

 // bigSum(){
    
    
 //     return this.$store.getters.bigSum
 // },

 // ...mapGetters(['bigSum']),

 ...mapGetters({
    
    
     bigSum:"bigSum"
 }),

mapMutations

The effects of the three methods in the figure below are equivalent:

// ADD(){
    
    
//     this.$store.commit("ADD",this.optionVal)
// },

// ...mapMutations(["ADD"]),

...mapMutations({
    
    ADD:"ADD"}),

mapActions

The effects of the three methods in the figure below are equivalent:

// addIfOdd(){
    
    
//     this.$store.dispatch("addIfOdd",this.optionVal)
// },

//...mapActions(['addIfOdd']),

...mapActions({
    
    
    addIfOdd:'addIfOdd',
}),

Modularity:

step:

Modify store/index.js:

modify the mapXxx auxiliary function:

• The first parameter is the namespace, which is this:
  

• The second parameter is the same as the first parameter in this article 使用> 基本使用> .辅助函数

example:

Roughly execute the process: