Vuex 标签 | 郁子IKUKO

三十八、Vuex简介

（一）理解 Vuex

1.Vuex 是什么

专门在 Vue 中实现 集中式状态（数据）管理 的一个 Vue 插件
- 集中式：类似于一名老师给一个班级的学生上课，老师只讲一遍，但是有一群学生的思维在接收
- 分布式：与集中式相对
对 Vue 应用中多个组件的 共享状态 进行集中式的管理（读/写）
也是一种组件间通信的方式，且适用于任意组件间通信

2.GitHub 地址

郁子大约 1 分钟

三十九、Vuex使用

（一）基本使用

1.初始化配置文件

初始数据
配置 actions
配置 mutations

// store.js
// 引入Vue
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 使用Vuex
Vue.use(Vuex);

const actions = {
  // 响应组件中加的动作
  jia(context, value) {
    // context ==> miniStore
    // console.log("Actions中的jia被调用了", miniStore, value);
    context.commit("JIA", value);
  },
};

const mutations = {
  // 执行加
  JIA(state, value) {
    // console.log("Mutations中的JIA被调用了", state, value);
    state.sum += value;
  },
};

// 初始化数据
const state = {
  sum: 0,
};

// 创建并暴露Store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

郁子大约 3 分钟