使用vuex实现增加、减少

最新推荐文章于 2024-03-11 17:00:00 发布

m0_50632711

最新推荐文章于 2024-03-11 17:00:00 发布

阅读量312

点赞数 1

分类专栏： vue学习

本文链接：https://blog.csdn.net/m0_50632711/article/details/119321280

版权

本文介绍了如何在Vue项目中使用Vuex进行状态管理，通过引入Addition.vue和Subtraction.vue组件，实现在div中进行加减操作。在store.js中定义了state和mutations，包括add、addN、sub以及subN方法，同时在actions中处理异步操作，如addAsync和addNAsync。最后展示了组件的使用效果。

摘要由CSDN通过智能技术生成

1.引入组件Addition.vue和Subtraction.vue
在这里插入图片描述
2.

3.在div中使用自定义组件

4.在store.js中

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
//变更状态,不要在mutations中执行异步操作（延迟）
state.count++
// setTimeout(()=>{
// state.count++
// },1000)
},
addN(state,step){
state.count += step
},
sub(state){
state.count–
},
subN(state,step){
state.