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:
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Convert an array or object to a JSON string using PHP's json_encode() function
Nov 03, 2023 pm 03:30 PM
JSON (JavaScriptObjectNotation) is a lightweight data exchange format that has become a common format for data exchange between web applications. PHP's json_encode() function can convert an array or object into a JSON string. This article will introduce how to use PHP's json_encode() function, including syntax, parameters, return values, and specific examples. Syntax The syntax of the json_encode() function is as follows: st
Use Python's __contains__() function to define the containment operation of an object
Aug 22, 2023 pm 04:23 PM
Use Python's __contains__() function to define the containment operation of an object. Python is a concise and powerful programming language that provides many powerful features to handle various types of data. One of them is to implement the containment operation of objects by defining the __contains__() function. This article will introduce how to use the __contains__() function to define the containment operation of an object, and give some sample code. The __contains__() function is Pytho
How to convert MySQL query result array to object?
Apr 29, 2024 pm 01:09 PM
Here's how to convert a MySQL query result array into an object: Create an empty object array. Loop through the resulting array and create a new object for each row. Use a foreach loop to assign the key-value pairs of each row to the corresponding properties of the new object. Adds a new object to the object array. Close the database connection.
![How to solve the problem 'Error: [vuex] unknown action type: xxx' when using vuex in a Vue application?](https://img.php.cn/upload/article/000/887/227/168766615217161.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
How to solve the problem 'Error: [vuex] unknown action type: xxx' when using vuex in a Vue application?
Jun 25, 2023 pm 12:09 PM
In Vue.js projects, vuex is a very useful state management tool. It helps us share state among multiple components and provides a reliable way to manage state changes. But when using vuex, sometimes you will encounter the error "Error:[vuex]unknownactiontype:xxx". This article will explain the cause and solution of this error. 1. Cause of the error When using vuex, we need to define some actions and mu
![How to solve the problem 'Error: [vuex] do not mutate vuex store state outside mutation handlers.' when using vuex in a Vue application?](https://img.php.cn/upload/article/000/000/164/168760467048976.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
How to solve the problem 'Error: [vuex] do not mutate vuex store state outside mutation handlers.' when using vuex in a Vue application?
Jun 24, 2023 pm 07:04 PM
In Vue applications, using vuex is a common state management method. However, when using vuex, we may sometimes encounter such an error message: "Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers." What does this error message mean? Why does this error message appear? How to fix this error? This article will cover this issue in detail. The error message contains
How do PHP functions return objects?
Apr 10, 2024 pm 03:18 PM
PHP functions can encapsulate data into a custom structure by returning an object using a return statement followed by an object instance. Syntax: functionget_object():object{}. This allows creating objects with custom properties and methods and processing data in the form of objects.
Use Python's __le__() function to define a less than or equal comparison of two objects
Aug 21, 2023 pm 09:29 PM
Title: Using Python's __le__() function to define a less than or equal comparison of two objects In Python, we can define comparison operations between objects by using special methods. One of them is the __le__() function, which is used to define less than or equal comparisons. The __le__() function is a magic method in Python and is a special function used to implement the "less than or equal" operation. When we compare two objects using the less than or equal operator (<=), Python
What is the difference between arrays and objects in PHP?
Apr 29, 2024 pm 02:39 PM
In PHP, an array is an ordered sequence, and elements are accessed by index; an object is an entity with properties and methods, created through the new keyword. Array access is via index, object access is via properties/methods. Array values are passed and object references are passed.
