文章目录
Vuex是什么
Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
- Vuex主要是来实现数据共享的
- Vuex中的数据我们也可以叫做状态
- Vuex 它的本质就是来实现组件之间数据共享的一种方案
组件之间共享数据的方式
- 父向子传值:v-bind属性绑定
- 子向父传值:v-on 事件绑定
- 兄弟组件之间共享数据:EventBus
- o n 在 数 据 接 收 方 , 我 们 要 通 过 on 在数据接收方,我们要通过 on在数据接收方,我们要通过on来注册一个自定义的事件
- e m i t 在 数 据 的 发 送 方 , 通 过 emit 在数据的发送方,通过 emit在数据的发送方,通过emit来发送数据
使用 Vuex 统一管理状态的好处
- 能够在 Vuex 中集中管理共享的数据,易于开发和后期维护。
- 能够高效的实现组件之间的数据共享,提高开发效率。
- 存储在 Vuex 中的数据都是响应式的,能够实时保持数据与页面的同步。
State
State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储。
// 创建 store 数据源,提供唯一公共数据
const store = new Vuex.Store({
state: { count: 0 }
});
- 组件访问State中数据的两种方式
this.$store.state. // 全局数据对象
import { mapState } from 'vuex'
// 将全局数据,映射为当前组件的计算属性
computed: {
...mapState(['count'])
}
Mutation
Mutation 用于变更 Store 中的数据。
- 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。
- 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
- 触发 mutations 的两种方式
this.$store.commit()
import { mapMutations } from 'vuex';
// 将指定的 mutations 函数,映射为当前组件的 methods 函数
methods: {
...mapMutations(['add', 'addN'])
}
Action
Action 用于处理异步任务。
如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发 Mutation 的方式间接更新数据。
- 触发 actions 的方式
- this.$store.dispatch()
Getter1
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
- Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似于 Vue 的计算属性。
- Store 中数据发生变化,Getter 的数据也会跟着变化。
*定义Getter
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
showNum: state => {
return '当前最新的数量是【' + state.count + '】';
}
}
})
* 使用Getters 的两种方式 * this.$store.getters.名称 * ...mapGetters(['showNum'])
Getter 不会修改 Store 里面的源数据,它只起到一个包装数据的作用 ↩︎