vuex

Vuex是实现组件之间数据共享的一种机制

父子传值或者兄弟传值,不好管理,而且有些需求实现不了

vuex提供了一种全新的数据共享管理机制, 该模式相比较简单的组件传值更加高端、大气、上档次

初始化 vuex

1
npm i vuex -S

导入并注册

1
2
import Vuex from "vuex";
Vue.use(Vuex);

创建 store 公共状态对象

在 main.js 文件中添加:

1
2
3
4
5
6
const store = new Vuex.Store({
// state 中存放的,就是全局共享的数据,可以把 state 认为 是组件中的 data
state: {
count: 0,
},
});

将创建的 store 挂载到 vm 实例上

1
2
3
4
5
6
new Vue({
el: "#app",
render: (c) => c(app),
router,
store, // 将 创建的共享状态对象,挂载到 Vue 实例中,这样,所有的组件,就可以直接从 store 中获取 全局的数据了
});

访问信息

1
this.$store.state.xxx;

修改信息

不要直接修改this.$store.state.xxx,容易造成数据混乱

mutations 方式

同步

1
2
3
4
5
6
7
8
9
mutations:{
// 参数state是固定的,代表vuex本身的state,用以获取共享数据
add(state){
state.count++
}
}
...
// 调用
this.$store.commit('add')

actions 方式

异步

总结:

store 中存储的数据,不要放到 data 中, 而是要放到计算你属性中,因为:

  1. 如果将字符串, 数字这些普通值赋值给 data 中的属性时,当我们使用双向数据绑定来修改 data 中的数据时, 原来 store 中的数据是不会被影响的
  2. vue 官方推荐使用 mutation 的方式来统一修改 store 中的数据, mutation 是需要我们定义的