vuex progressive tutorials, which take you to use vuex slowly and deeply from the entry level.
What is Vuex?
Vuex is a state management model developed specifically for applications. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable way with corresponding rules.
vuex official website:/zh/guide/
Install
Install vue-cli:
cnpm install -g vue-cli vue init webpack vuex
Install vuex
cnpm i vuex --save
1. Elementary usage method
//
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex' // Introduce vuex
= false
(Vuex);
let store = new ({ // store object state:{
count:0
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //Use store, this can inject store instance into all child components components: { App },
template: '<App/>'
})
At this time, you can use this.$ in the component to get the value of state in the store. like:
// Use in component computed computed:{
count(){
return this.$;
}
}
Think about the data when the project is larger, if you use vuex according to the above method, the scene you see is quite chaotic when you open it, and the various data are complicated, which is inconvenient for future maintenance. Please see the next step:
2. Intermediate usage method: modules modular
Usage of state
2.1 Delete the following code in
let store = new ({ // store object state:{
count:0
}
})
2.2. Create a new store folder in the src directory and create a new file under the folder. Write in store/:
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
const store = new ({
strict:true, // Turn on strict mode to ensure that the data in state can only be modified by mutations state:{
count:0
}
})
export default store;
The corresponding one should be written to:
import store from './store'
Having written this, we can get the value of the state in the store in the component
2.3 For the convenience of testing, use the store directly in
<template>
<div class="hello">
<h2>{{count}}</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed:{
count(){
return this.$;
}
}
}
</script>
Many times we have to operate on the values in the state, and provide a method mutation in vuex
Usage of mutations (using mutations can modify the value of state)
Write in sore\:
//
...
state:{
count:0
},
mutations:{ // How to change data add(state){
++
},
//Submit load usage// add(state,n){
// += n
// },
sub(state){
--
}
}
...
//
Use the corresponding methods in mutations in component():
<template>
<div class="hello">
<button @click="add">+</button>
<h2>{{count}}</h2>
<button @click="sub">-</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed:{
count(){
return this.$;
}
},
methods:{
add(){
this.$('add');
},
//Submit load usage // add(){
// this.$('add',10);
// },
//Object style submission method // ({
// type: 'add',
// n: 10
// })
sub(){
this.$('sub');
}
}
}
</script>
You can modify the count at this time.
When you want to operate asynchronously, since mutation must be synchronous, you cannot use mutation to modify state. Action comes in handy. Action is a collection of functions that can be operated in it, as long as mutation is triggered at the end.
Annotation reason why mutation cannot be operated asynchronously:
mutations: {
add (state) {
(() => {
++
})
}
}
Now imagine that we are debugging an app and observing the mutation log in devtool. Each mutation is recorded, and devtools needs to capture snapshots of the previous and next states. However, in the above example, the callback in the asynchronous function in mutation makes this impossible: because when mutation is triggered, the callback function has not been called yet, devtools does not know when the callback function is actually called - essentially any state changes made in the callback function are untraceable.
Action Usage
Write in sore\:
mutations:{ // How to change dataadd(state){
++
},
sub(state){
--
}
},
++++
actions:{
add(context){ // context has the same methods and properties as the store instance (but not the store instance) setTimeout(()=>{
('add');
},1000)
}
}
++++
Use the corresponding method in getters in component():
<template>
<div class="hello">
<button @click="add">+</button>
++++
<button @click="add_action">action +</button>
++++
<h2>{{count}}</h2>
<button @click="sub">-</button>
<div>
test: {{doneTodos[0].text}} <br>
length: {{doneTodosLength}}
</div>
</div>
</template>
export default {
methods:{
add(){
this.$('add');
// (this);
},
sub(){
this.$('sub');
},
++++
add_action(){
this.$('add');
}
++++
}
}
Have you ever thought that when we use a certain data in the state, we only want to use the data that meets the criteria in the data. for example:
state:{
count:0,
todos: [
{ id: 1, text: 'text1--true', done: true },
{ id: 2, text: 'text2--false', done: false }
]
}
At this time, how should we obtain the data with done is true?
There may be two options:
1. Each component first gets todos, and then filters using the filter method;
2. Write a common function to call the following in each component;
If there are many components in todos where done is true, both methods are not ideal. Vuex introduces a method Getter for this.
Getter Usage
Official explanation: Vuex allows us to define "getter" in the store (which can be considered as a computed property of the store). Just like computed properties, the return value of getter is cached according to its dependencies and will be recalculated only if its dependencies change.
Write in sore\:
mutations:{ // How to change data add(state){
++
},
sub(state){
--
}
},
+++
getters:{ // The usage is similar to that of the component, which can be considered as the computed property of the store doneTodos:state => { // Getter accepts state as its first parameter: return (todo => ) // -> [{ id: 1, text: 'text1--true', done: true }]
},
// Getter can also accept other getters as the second parameter doneTodosLength:(state,getters) => {
return // -> 1
},
+++
}
Use the corresponding method in getters in component():
<template>
<div class="hello">
<button @click="add">+</button>
<h2>{{count}}</h2>
<button @click="sub">-</button>
+++
<div>
test: {{doneTodos[0].text}} <br>
length: {{doneTodosLength}}
</div>
+++
</div>
</template>
<script>
export default {
//...
computed:{
+++
doneTodos(){
return this.$ // -> [{ id: 1, text: 'text1--true', done: true }]
},
doneTodosLength(){
return this.$ // -> 1
}
+++
}
}
</script>
The code address of this article:/xioasa/vue-…
Summarize
The above is the example code of vuex progressive tutorial introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply to you in time!