vuex基本知识

在这里插入图片描述

Vuex是实现组件全局状态数据管理的一种机制,可以方便的实现组件之间的数据共享
好处:
易于开发和维护
实现数据共享
数据是响应式的,能够和页面保持同步

vuex的核心概念
State 公共数据源
Mutation 变更全局数据 不执行异步操作
Action 处理异步业务 但是在Action中还是要通过触发mutation的方式间接变更数据(在actions中不能直接修改state中的数据,必须通过context.commit()触发某个mutation才行)
只有Mutation中定义的函数才能修改state中的数据,别的函数想要修改只能间接
Getter **不会修改store里面的原数据,**用于对store中的数据进行加工处理 类似Vue的计算属性

组件中访问公共数据源的方法
1.this.$store.state.全局数据名称
2.在vuex中按需导入mapState函数
import { mapState } from ‘vuex’
将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed: {
…mapState([‘全局数据名称’])
}

注意 1.只能通过mutation变更Store数据,不可以在组件中直接操作Store中的数据,例如this.$store,state,count++ 不合法(不方便维护)

2.触发mutation的第一种方法
this.$store.commit(‘方法名’)
commit的作用就是调用某个mutation函数
触发mutation的第二种方法
impore { mapMutation } from ‘vuex’
将需要的mutations函数映射到当前组件的methods方法
methods: {
…mapMutation([‘add’,‘addN’])
}

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

触发action的方式
1.this.$store.dispatch(‘函数名’)
2…mapActions([‘函数名’]),

使用getters的第一种方式
this.$store.getters.名称
使用getters的第二种方式
import { mapGetters } from ‘vuex’
computed: {
…mapGetters([‘名称’])
}

发布了33 篇原创文章 · 获赞 0 · 访问量 862

猜你喜欢

转载自blog.csdn.net/weixin_44685781/article/details/105111659
今日推荐