vuex
Vuex
是实现组件之间数据共享的一种机制
父子传值或者兄弟传值,不好管理,而且有些需求实现不了
vuex
提供了一种全新的数据共享管理机制, 该模式相比较简单的组件传值更加高端、大气、上档次
初始化 vuex
1 | npm i vuex -S |
导入并注册
1 | import Vuex from "vuex"; |
创建 store 公共状态对象
在 main.js 文件中添加:
1 | const store = new Vuex.Store({ |
将创建的 store 挂载到 vm 实例上
1 | new Vue({ |
访问信息
1 | this.$store.state.xxx; |
修改信息
不要直接修改this.$store.state.xxx
,容易造成数据混乱
mutations 方式
同步
1 | mutations:{ |
actions 方式
异步
总结:
store 中存储的数据,不要放到 data 中, 而是要放到计算你属性中,因为:
- 如果将字符串, 数字这些普通值赋值给 data 中的属性时,当我们使用双向数据绑定来修改 data 中的数据时, 原来 store 中的数据是不会被影响的
- vue 官方推荐使用 mutation 的方式来统一修改 store 中的数据, mutation 是需要我们定义的