1.state存放数据
获取state数据两种方式
(1)this.$store.state
(2)<template>
<div class="about">count1值:{{ count }}</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
data() {
return {};
},
computed:{
...mapState(['count'])
}
};
</script>
2.mutations修改state中的数据
修改state有两种方式
(1)第一种方式:在vuex文件夹
通过this.$store.commit修改
// 存放的全局共享数据
state: {
count: 0
},
// 修改state中的数据
// 在需要的页面通过this.$store.commit('addNum')调用这个方法
mutations: {
addNum(state) {
state.count++
},
addN(state, step) {
state.count += step
}
},
(2)第二种方式
通过mapMutations 修改
<template>
<div class="about">
count1值:{{ count }}
<button @click="btnHandler">-</button>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {};
},
methods: {
...mapMutations(["sub"]),
btnHandler() {
this.sub();
},
},
computed: {
...mapState(["count"]),
},
};
</script>
3.actions处理异步任务
两种方式:
(1)触发actions通过this.$store.dispatch
不能直接修改mutations的数据,要通过commit修改
actions: {
addAsync(contentTxt) {
contentTxt.commit('addAsyncNum')
}
},
(2)在methods,通过...mapActions{['addAsync']}
vue使用vuex
最新推荐文章于 2024-09-27 15:58:06 发布