Detailed explanation of vuex's method of operating state objects

This time I will bring you a detailed explanation of the method of operating state objects in vuex. What are the precautions for operating state objects in vuex. 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, 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 => ModularizationVuex

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 the Vuex properties in the Vue component

•We can get the Vuex 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
    }
  },
  //..
})

Below Take a look at the example code of vuex operating state object

Whenever store.state.count changes, the calculated properties will be re-obtained 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 through this.$store.state.data name

Global properties.

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:

What are the differences between length and size() in jQuery

Chain style in JS design pattern Call using parse

The above is the detailed content of Detailed explanation of vuex's method of operating state objects. For more information, please follow other related articles on the PHP Chinese website!