This time I will show you how to use vuex to operate state objects, and what are the precautions for using vuex to operate state objects. The following is a practical case, let's take a look.

What is Vuex?

VueX is a state management architecture specially designed for Vue.js applications. It uniformly manages and maintains the changeable state of each vue component (you can understand it as some data in the vue component).

Vue has five core concepts, state, getters, mutations, actions, and modules.

Summary

state => Basic data
getters => Data derived from basic data
mutations => Method to submit changed data ,Synchronize!
actions => Like a decorator, wrapping mutations so that they can be asynchronous.
modules => Modular Vuex

State

state is the basic data in Vuex!

Single state tree

Vuex uses a single state tree, that is, one object contains all state data. As a constructor option, state defines all the basic state parameters we need.

Get Vuex attributes in Vue components

?We can get Vuex’s state through Vue’s Computed, as follows:

const?store?=?new?Vuex.Store({
??state:?{
????count:0
??}
})
const?app?=?new?Vue({
??//..
??store,
??computed:?{
????count:?function(){
??????return?this.$store.state.count
????}
??},
??//..
})

Let’s take a look at the vuex operation state object Example code

Whenever store.state.count changes, the calculated properties will be re-retrieved and the associated DOM will be updated.

The core of every Vuex application is the store (warehouse).

Quote two sentences from the official document to describe vuex:

1, Vuex’s state storage is responsive. When a Vue component reads state from the store, if the state in the store changes, the corresponding component will be efficiently updated accordingly.

2, you cannot directly change the state in the store. The only way to change the state in the store is to explicitly commit a mutation. This allows us to easily track every state change, allowing us to implement some tools to help us better understand our application.

Use the state in vuex

1, introduce store in the root component, then the sub-component can get this global through this.$store.state.data name attribute.

The project I created using vue-cli, App.vue is the root component

App.vue code

<template>
?<p id="app">
???<h1>{{$store.state.count}}</h1>??
??<router-view/>
?</p>
</template>
<script>
?import?store?from?'@/vuex/store';
export?default?{
?name:?'App',
?store
}
</script>
<style>
</style>

Count.vue code in the component folder

<template>
?<p>
???<h3>{{this.$store.state.count}}</h3>
?</p>
</template>
<script>?
??export?default?{
????name:'count'，
??}
</script>
<style scoped>
</style>

Store.js code

import?Vue?from?'vue'
import?Vuex?from?'vuex'
Vue.use(Vuex);
const?state?=?{
?count:?1
}
export?default?new?Vuex.Store({
?state，
})

2, get the global attribute through the mapState auxiliary function

The advantage of this method is that you can use it directly to get the attribute value through the attribute name .

Change the code of Component.vue

<template>
?<p>
???<h3>{{this.$store.state.count}}--{{count}}</h3>
??<h4>{{index2}}</h4>
?</p>
</template>
<script>?
??import?{?mapState,mapMutations,mapGetters?}?from?"vuex";
??export?default?{
????name:'count',
????data:function(){
??????return?{
????????index:10
??????}
????},
????//通過對(duì)象展開運(yùn)算符vuex里的屬性可以與組件局部屬性混用。
????computed:{...mapState(['count']),
??????index2()?{
????????return?this.index+30;
??????}??
????}?,
??}
</script>
<style scoped>
</style>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to parse vue files

##How to optimize Vue

The above is the detailed content of How to use vuex to operate state objects. For more information, please follow other related articles on the PHP Chinese website!