How to store and obtain Vuex data

Vuex data storage and acquisition

Because the original project needs to be modified recently, I have not carefully studied the use of vuex before. Today I will record the process of learning official documents for future reference. At the same time, I hope to provide reference for other developers.

The core point of vuex is store, which is essentially a repository that can store most of the state. This kind of storage is responsive. If the state changes, the corresponding components will also respond to updates. If you want to change the state, you need to use commit mutation.

The following example is quoted from the official website (Start | Vuex)

// Create a new store instanceconst store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      ++
    }
  }
})

After creation is completed, you can submit state changes in the vue component with this.$('specific mutation method')

Then use this.$ to obtain the content of the object.

If you want to read the state from the store instance more easily, you can return a certain state directly in computed:

// Create a Counter componentconst Counter = {
  template: `&lt;div&gt;{{ count }}&lt;/div&gt;`,
  computed: {
    count () {
      return 
    }
  }
}

However, in order to avoid multiple dom departures, the vue plugin can inject store instances from the following components into all subcomponents, which can be accessed through $store.

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$
    }
  }
}

When we need multiple states, we can use mapState to generate computed properties

computed: {
  localComputed () { /* ... */ },
  // Use the object expansion operator to mix this object into an external object  ...mapState({
    // ...
  })
}

A practical example can be given

import Vuex from 'vuex' 
(Vuex)
 
const store = new ({
//Storing global statusstate:{
count:0
},
 
//getters is a processing and packaging of state, such as filtering some data, etc., as a read-only method, obtaining the value through returngetters:{
countNum(state){
return `the account NUm is ${}`
}
}
 
//Modify state through mutations. If you modify state directly, some features will be lost.mutations:{
 add(state){
++
},
 minus(state){
--
}  
}  
//actions involve business logic and do not involve some behaviors of the page.})

In the corresponding vue component, the following code can display the value of count on the page, and the following operations can be performed in a component of vue, for example, the following operations can be performed in a component of vue, for example.

<template>
 
<div>
<h1>{{count}}</h1>
<h2>{{countNum}} </h2>
</div>
 
</template>

<script> 
import {mapState,mapGetters} from 'vuex' 
export default{
 
//
computed:{
...mapState(['count'])
...mapGetters{['countNum']}
}
}
</script>

If you want to use the method in mutation, you can perform the following operations in another vue file, for example. At the same time, for the convenience of observation, you can select vuex to observe vue content in real time in the console.

&lt;template&gt;
&lt;div&gt;
&lt;button @click=addnum&gt;Increase&lt;/button&gt;
&lt;/div&gt;
&lt;/template&gt;

methods：{
...mapMutations('add','minus')
addnum（）{
//mutations must be used through commit, but because...mapMutations was called before, you can call() directly;//this.$('add')
()
 
//Using mutations will ensure that there are records of vuex state change, and this.$ will also take effect if this.//this.$++ However, this writing method cannot produce records in the development tool vuex}
}
 
&lt;javascript&gt;
&lt;/javascript&gt;

Generally speaking, simple business logic should be written in mutation, and complex business logic should be written in actions.

Vuex storage and value acquisition (simple and easy to understand)

Component memory value

methods: {  
     fn() {     
             this.$('setValue',xxx)   //The value stored in setValue is named as the value to be stored in xxx          }           
    }

In the state

const state = {
    xxx:'',//Initialize the name of the stored value}

in the matution

  setValue(state,item){
    = item;//The second parameter is named at will  },

Get value in component

//Get the value in the calculation attribute, js write directly like this to get the value, html is directly used xxx computed: {    
    value() {
      return this.$;
    }
  },

The above is personal experience. I hope you can give you a reference and I hope you can support me more.