Write it first — if you’re a beginner

Remember: Vuex is a repository of data. The usage scenario is: we can take it out and use it anywhere, we can change it and put it in, we can take it out and use it when we want, and so on.

There was a time when I didn’t like to read official documents, even now.

Specific usage scenarios: Development process, we often encounter a state may use between multiple components, such as when we do the project using the information of users, what nickname, face it, these information will be used in the different components, once change the state, we hope that other components also follow change, such as user prepaid phone 100 yuan, or change the nickname, Therefore, the state management mode is needed for centralized management. Detailed information about Vuex can be found on the official website.

I. Prerequisite for vuEX:

  1. Vuex dependencies are installed: NPM install –save vuex

  2. Create a store folder in the SRC folder, create an index.js file in the store folder, and write the following code:

import Vuex from 'vuex'; Use (vuex) export default new vuex.Store({state: vuex) export default new vuex.Store({state: vuex) Open mutations:{// open mutations:{// open mutations:{// open mutations:{// open mutations:{// open mutations:{// open mutations:{ Getters :{// getters is similar to computed // write a method in here}, Actions :{// actions Similar to methods // write methods to change data (asynchronous operation)}}) export default StoreCopy the code
  1. Import and expose the vuex in the entry file main.js
Import store from '"@/store/index.js' new Vue({el: '#app', router, store,// and expose render: h => h(App) })Copy the code

Write in the middle — even if you don’t know much about Vuex, you can configure it and get halfway there

Second, the data warehouse state and the tool person mutations

Simply using Vuex, the toolman takes state out and changes its state

// define a data export default new vuex.Store({state: Mutations :{count:0}, mutations:{increment(state) {// change the status of the method state.count++; }}})Copy the code

The first way to use mutations: this. codestore.com MIT ()

Const temp = this.$store.state.count // Change it and put it back. Commit (type,[payload]) This.$store.com MIT ('increment',temp) // use new code. console.log(this.$store.state.count)->1Copy the code

The second way to use mutations: the auxiliary function ————mapState

This method is very important and very practical, sometimes need to obtain more than one state, but using the calculation attribute will be called many times, it is troublesome, here with the mapState method to obtain the state. Using mapState requires the introduction of this method

Import {mapState} from 'vuex';Copy the code
// Use the expansion operator... , and then you can get the state in the method directly this.count computed: {// return multiple things you can write like... mapState(['count', 'firstName', 'lastName']) ... mapState(['count']) },Copy the code

Getter and mapGetters

A getter is equivalent to a VUE calculating properties. It only wraps the data in state to form new data and does not modify the original data. When the data in state changes, the data in the getter changes, reactive

export default new Vuex.Store({ state: { count:0 }, getters: { showCount: State => {return 'current count is' + state.count + '! '}}});Copy the code

The first way to use getters is:

// You can also use this.$store.getters directly in the interpolation. The name of theCopy the code

The second way to use getters is:

// Use import {mapGetters} from 'vuex' computed:{... mapGetters(['showCount']) }Copy the code

Mutations derivative brothers: Acticons and mapActions

Actions is an asynchronous operation of the data in VUEX, and the data state cannot be changed directly like mutations alone. Instead, the data state must be changed indirectly through mutation

First way to trigger actions: this.$store.dispatch()

Vuex export default new vuex.Store({state: {count:0}, mutations:{increment(state) { }}, actions:{addAsync(context,step){// use the mutations method,step is the received parameters context.com MIT ('increment',step)}}})Copy the code
$store. Dispatch ('addAsync',5)}}Copy the code

The second way to trigger an action is to map the specified action function to the current component's methods function

<script> import {mapActions} from 'vuex'... Methods :{// mapping to internal functions... MapActions (['addAsync']), // a button click event btnHandle(){// Use it directly; The solution calls the vuex actions method addAsync, which in turn calls the mutations method increment this.addAsync()}} </script>Copy the code

Write it at the end — if you’ve read it

This is a personal understanding, the specific use must go to practice, experience is shallow, if there is lack of stubborn friends must point out.