What is the use of vuex?

vuex is a state management library based on the vue framework. It can manage the data status of complex applications and facilitate data sharing between components, such as communication between sibling components and transmission of multi-layer nested components. values, etc.; it uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.

Vuex is a state management model specially developed for Vue.js applications. It is a state management library based on the vue framework. It can manage the data status of complex applications and facilitate data sharing between components, such as communication between sibling components, value transfer among multi-layer nested components, etc.

Vuex uses centralized storage to manage the status of all components of the application, and uses corresponding rules to ensure that the status changes in a predictable way.

Vuex is also integrated into Vue’s official debugging tool devtools extension, providing advanced debugging functions such as zero-configuration time-travel debugging, state snapshot import and export, etc.

Core features in Vuex

(1)State: Provides the only public data source, and all shared data must be stored in the State in the Store.

How to access State in the component:

A.this.$store.state. The global data name is such as: this.$store.state.count

B. First import the mapState function as needed: import { mapState } from 'vuex'

Then the data is mapped to calculated attributes: computed:{ ...mapState(['global data name']) }

( 2) Mutation: used to modify the data in $store

Usage:

Open the store.js file, add the following code in mutations:

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

Then in Add the event code to the button in Addition.vue as follows:

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit(&#39;add&#39;,10)
  }
}

The second way to use mutations:

import { mapMutations } from ‘vuex’
methods:{…mapMutations([‘add’])}

is as follows:

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

(3 )Action: You cannot write asynchronous code in mutations, which will cause display errors in the vue debugger. In vuex we can use Action to perform asynchronous operations.
The steps are as follows:

Open the store.js file and modify the Action as follows:

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

Then add the event code to the button in Addition.vue as follows:

<button @click="AddAsync">...+1</button>

methods:{
  AddAsync(){
    this.$store.dispatch(&#39;addAsync&#39;,5)
  }
}

(4) Getter: used to process the data in the Store to form new data.

It will only wrap the data saved in the Store and will not modify the data saved in the Store. When the data in the Store changes, the content generated by Getter will also change accordingly.
Open the store.js file and add getters, as follows:

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

Then open Addition.vue and add interpolation expressions using getters

<h3>{{$store.getters.showNum}}</h3>

You can also import in Addition.vue mapGetters, and map it to a calculated attribute

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:Programming Teaching ! !

The above is the detailed content of What is the use of vuex?. For more information, please follow other related articles on the PHP Chinese website!