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 是需要我们定义的