Vue中使用Vuex的store存储数据
Vuex中的 State1、State提供唯一的公共数据源,所有的共享的数据都要统一放在Store中的State中进行存储const store = new Vuex.Store({state:{count:0}})2、组件访问State中数据:第一种方式this.$store.state.全局数据名称<template><div c...
·
Vuex中的 State
1、State提供唯一的公共数据源,所有的共享的数据都要统一放在Store中的State中进行存储
const store = new Vuex.Store({
state:{
count:0
}
})
2、组件访问State中数据:
- 第一种方式this.$store.state.全局数据名称
<template>
<div class="hello">
<!-- 在template中 this可以省略 -->
<h1>{{ $store.state.count }}</h1>
</div>
</template>
- 第二种方式 从 vuex中按需导入mapState 函数
// 从 vuex中按需导入mapState 函数
<script>
import {mapState} from 'vuex'
export default {
data(){
return{}
},
computed:{
...mapState(['count'])
}
}
</script>
如何使用 mapState, 直接使用
<template>
<div>
<h3>获取全局变量的值: {{ count }} </h3>
</div>
</template>
Vuex中的 Mutation
1、Mutation 用于变更Store中的数据
- 只能通过Mutation 变更Store数据,不可以直接操作Store中的数据
- 通过这种方式可以集中监控所有数据变化
2、如何创建Mutation
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// state 中存放的就是全局共享的数据
state:{
count:0
},
// Mutation 用户变更Store数据
mutations:{
add(state){
state.count++
}
}
});
export default store
3、如何触发 mutation
- 使用$store.commit() 触发
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
HelloString: "Hello world IOT Know You !"
}
},
methods:{
handelAdd(){
// 触发mutation
this.$store.commit('add');
}
}
}
- 创建带参数的Mutation
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// state 中存放的就是全局共享的数据
state:{
count:0
},
// Mutation 用户变更Store数据
mutations:{
add(state){
state.count++
},
addN(state , step){
state.count += step
}
}
});
export default store
- 触发mutation
export default {
name: 'HelloWorld',
props: {
msg: String
},
data(){
return{
HelloString: "Hello world IOT Know You !"
}
},
methods:{
handelAdd(){
// 触发mutation
this.$store.commit('add');
},
handelAddN(){
// 触发mutation , 带参数
this.$store.commit('addN',3);
},
}
}
- 使用mapMutations函数触发
// 1.从Vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'
导入mapMutations函数后,将需要的mutations函数,映射为当前组件的methods方法
methods:{
...mapMutations(['add','addN'])
}
完成后,就可以像调组件方法一样直接调用
注意事项
在mutations中不可以写异步的方法
下面的写法是不对的
mutations:{
add(state){
setTimeout(() => {
state.count ++
} , 1000)
}
}
Vuex中的 Action
1、Action 是专门用于处理异步任务的
如需要通过异步操作变更数据,必须通过Action,不可以使用Mutation
使用Action改变数据时,还是会通过触发Mutation的方式间接变更数据
2、 使用 $store.dispatch()触发actions
定义Actions
actions:{
addAsync(context){
// 只有mutations中定义的方法才可以修改 state
setTimeout(()=>{context.commit('add')},1000)
}
}
触发Action
methods:{
handle(){
// 使用 $store.dispatch() 触发
this.$store.dispatch('addAsync')
}
}
定义带参数的Action
actions:{
addAsync(context , step){
// 只有mutations中定义的方法才可以修改 state
setTimeout(()=>{context.commit('addN',step)},1000)
}
}
触发Action
methods:{
handle(){
// 使用 $store.dispatch() 触发
this.$store.dispatch('addAsync')
}
}
3、使用 mapActions([’’])函数调用Actions
// 从vuex中导入 mapActions 函数
import { mapActions } from 'vuex'
// 将需要的actions函数映射到当前的组件
methods:{
...mapActions(['add','addN'])
}
Vuex中的 Getter
1、Getter用于对Store中的数据进行加工处理,形成新的数据
- Getter可以对Store中的数据加工处理之后形成新的数据
- Store中的数据发生变化,Getter中的数据也会发生改变
定义Getter
getters:{
showNum: state => {return 'Store中count的数值是:'+state.count}
}
2、调用Getter
- 使用 $store.getters.名称 调用
this.$store.getters.add
- 按需导入 mapGetters 函数调用
// 按需导入mapGetters
import {mapGetters} from 'vuex'
computed:{
...mapGetters(['add'])
}
更多推荐
所有评论(0)