How to use vuex to operate state objects

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
      }
    },
    //通过对象展开运算符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!