1. Overview of Vuex
Vuex is a mechanism for realizing the global state (data) management of components, which can easily realize data sharing between components
Benefits of using Vuex to manage data:
- Ability to centrally manage shared data in Vuex, which is convenient for development and later maintenance
- Able to efficiently realize data sharing between components and improve development efficiency
- The data stored in Vuex is responsive. When the data changes, the data in the page will also be updated synchronously
What kind of data is suitable for storage in Vuex:
In general, only the data shared between components need to be stored in Vuex; for the private data in the component, it can still be stored in the data of the component itself.
2. Basic use of Vuex
1), install vuex dependency package
npm install vuex --save
2), import the vuex package
import Vuex from 'vuex'
Vue.use(Vuex)
3), create a store object
export default new Vuex.Store({
//state中存放的就是全局共享的数据
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
4) Mount the store object to the vue instance
new Vue({
//将创建的共享数据对象,挂载到vue实例中
//所有的组件就可以直接从store中获取全局的数据了
store,
render: h => h(App)
}).$mount('#app')
3. Core features in Vuex
1）、State
State provides the only common data source, and all shared data must be stored in the State in the Store.
You can add the data to be shared in the State object, such as: count:0
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
},
actions: {
},
modules: {
}
})
The way to access State in the component :
Way one :
this.$store.state.全局数据名称,Such as:this.$store.state.count
<template>
<div>
<h3>当前最新的count值为:{
{$store.state.count}}</h3>
<button>+1</button>
</div>
</template>
Way two :
First import the mapState function as needed:import { mapState } from 'vuex'
Then the data is mapped to calculated attributes:computed:{ ...mapState(['全局数据名称']) }
<template>
<div>
<h3>当前最新的count值为:{
{count}}</h3>
<button>-1</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
}
}
</script>
2）、Mutation
Mutation is used to modify the data in $store
- Store data can only be changed through mutation, and data in Store cannot be directly manipulated
- Although the operation is a little more cumbersome in this way, you can centrally monitor the changes of all data
Define Mutation :
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add (state, step) {
// 第一个形参永远都是state也就是$state对象
// 第二个形参是调用add时传递的参数
state.count += step
}
},
actions: {
},
modules: {
}
})
Trigger Mutation in the component :
Way one :
<template>
<div>
<h3>当前最新的count值为:{
{count}}</h3>
<button @click="btnHandler">+1</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
btnHandler () {
this.$store.commit('add', 1)
}
}
}
</script>
Way two :
<template>
<div>
<h3>当前最新的count值为:{
{count}}</h3>
<button @click="btnHandler">-1</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
// 获得mapMutations映射的sub函数
...mapMutations(['sub']),
// 当点击按钮时触发Sub函数
btnHandler () {
// 调用sub函数完成对数据的操作
this.sub(1)
}
}
}
</script>
3）、Action
Action is used to handle asynchronous tasks. If you change data through asynchronous operations, you must use Action instead of Mutation, but in Action, you must indirectly change the data by triggering Mutation.
Way one :
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add (state, step) {
// 第一个形参永远都是state也就是$state对象
// 第二个形参是调用add时传递的参数
state.count += step
},
sub (state, step) {
state.count -= step
}
},
actions: {
addAsync (context, step) {
setTimeout(() => {
// 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
context.commit('add', step)
}, 1000)
}
},
modules: {
}
})
<template>
<div>
<h3>当前最新的count值为:{
{count}}</h3>
<button @click="btnHandler">+1</button>
<button @click="btnHandler2">+1 Async</button>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
btnHandler () {
this.$store.commit('add', 1)
},
btnHandler2 () {
this.$store.dispatch('addAsync', 1)
}
}
}
</script>
Way two :
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add (state, step) {
// 第一个形参永远都是state也就是$state对象
// 第二个形参是调用add时传递的参数
state.count += step
},
sub (state, step) {
state.count -= step
}
},
actions: {
addAsync (context, step) {
setTimeout(() => {
// 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
context.commit('add', step)
}, 1000)
},
subAsync (context, step) {
setTimeout(() => {
context.commit('sub', step)
}, 1000)
}
},
modules: {
}
})
<template>
<div>
<h3>当前最新的count值为:{
{count}}</h3>
<button @click="btnHandler">-1</button>
<button @click="btnHandler2">-1 Async</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count'])
},
methods: {
// 获得mapMutations映射的sub函数
...mapMutations(['sub']),
...mapActions(['subAsync']),
// 当点击按钮时触发Sub函数
btnHandler () {
// 调用sub函数完成对数据的操作
this.sub(1)
},
btnHandler2 () {
this.subAsync(1)
}
}
}
</script>
4）、Getter
Getter is used to process the data in the Store to form new data. It only packs the data stored in the Store, and does not modify the data stored in the Store. When the data in the Store changes, the content generated by Getter will also change.
Define Getter :
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add (state, step) {
// 第一个形参永远都是state也就是$state对象
// 第二个形参是调用add时传递的参数
state.count += step
},
sub (state, step) {
state.count -= step
}
},
actions: {
addAsync (context, step) {
setTimeout(() => {
// 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
context.commit('add', step)
}, 1000)
},
subAsync (context, step) {
setTimeout(() => {
context.commit('sub', step)
}, 1000)
}
},
getters: {
showNum (state) {
return '当前最新的数量是【' + state.count + '】'
}
},
modules: {
}
})
Use Getter in components :
Way one :
<template>
<div>
<h3>{
{$store.getters.showNum}}</h3>
<button @click="btnHandler">+1</button>
<button @click="btnHandler2">+1 Async</button>
</div>
</template>
Way two :
<template>
<div>
<h3>{
{showNum}}</h3>
<button @click="btnHandler">-1</button>
<button @click="btnHandler2">-1 Async</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
data () {
return {}
},
computed: {
...mapState(['count']),
...mapGetters(['showNum'])
},
methods: {
// 获得mapMutations映射的sub函数
...mapMutations(['sub']),
...mapActions(['subAsync']),
// 当点击按钮时触发Sub函数
btnHandler () {
// 调用sub函数完成对数据的操作
this.sub(1)
},
btnHandler2 () {
this.subAsync(1)
}
}
}
</script>