Vue知识点整理（五）- vuex（1）- Vuex简介、Vuex工作原理、搭载Vuex环境、求和案例

因为actions.context中也包含了state，可由actions去更新state中的数据，不经过mutation，因而不被开发者工具（Devtools）监控，但不提倡这么做

（即Actions -> Mutate -> State）

（4）state中的数据更新之后，就会通知vue进行渲染

（对应原理图：State -> Render -> Vue Components）

组件中读取vuex中的数据：

$store.state.自定义的数据名 // 在vuex中index.js文件中state内定义的数据

组件中修改vuex中的数据：

$store.dispath('action中的方法名',数据)
或
$store.commit('mutation中的方法名',数据)

注意：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

三、搭建Vuex环境

3.1 安装

终端安装

npm i vuex

注意：

2022.2.7，vue3称为了默认版本，即在终端执行 npm i vue，默认安装的是vue3版本，而vuex也更新到4版本，所以终端执行 npm i vuex 默认安装的是vuex4
vuex4 只能在 vue3中使用，而vue2中，要用的是vuex的3版本

所以如果用的是vue2的话，则需要安装vuex的3版本，在终端执行：

npm i vuex@3

3.2 引用Vuex

1. 创建文件：src/store/index.js

// 引入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 应用Vuex插件
Vue.use(Vuex);

// 准备actions对象 - 响应组件中用户的动作
const actions = {};
// 准备mutations对象 - 修改state中的数据
const mutations = {};
// 准备state对象 - 保存具体数据
const states = {};

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

2. 在main.js中创建vm时传入store配置项

// 引入Vue
import Vue from "vue";
// 引入App
import App from "./App.vue";
// 引入store配置项
import store from "./store";

Vue.config.productionTip = false;

// 创建vm
new Vue({
  el: "#app",
  render: (h) => h(App),
  store,
  // 安装全局事件总线
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
});

如何验证是否成功引入store配置项？即可控制台输出组件实例对象，找到$store即为成功引入

注意：至于为何引入Vuex是在 src/store/index.js 中引入，而非在 main.js 中直接引入使用

因为 import 引入模块或者文件，在执行时，默认是放在文件最前端优先执行的。而当我们在main.js中引入store配置项时，先决条件是需要 Vue.use(Vuex) 之后执行，因此在 main.js 中直接引入使用Vuex 和 store配置项时，就会出现报错

例如，如下main.js代码，便会出现报错

// 错误示范案例

// 引入Vue
import Vue from "vue";
// 引入App
import App from "./App.vue";
// 引入Vuex
import Vuex from "vuex";
// 应用Vuex插件
Vue.use(Vuex);
// 引入store配置项
import store from "./store";

Vue.config.productionTip = false;

// 创建vm
new Vue({
  el: "#app",
  render: (h) => h(App),
  store,
  // 安装全局事件总线
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
});

由图示可看出错误提示信息，vuex 在创建 store实例之前必须先调用 Vue.use(Vuex)

四、案例练习 - 求和案例

4.1 Count.vue

Count子组件：包含4个按钮的点击事件

<template>
  <div style="padding: 20px">
    <h1>当前求和为:{{ $store.state.sum }}</h1>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等1s后再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, // 用户选择的数字
    };
  },
  methods: {
    increment() {
      this.$store.commit("ADD", this.n);
    },
    decrement() {
      this.$store.commit("SUB", this.n);
    },
    incrementOdd() {
      this.$store.dispatch("addOdd", this.n);
    },
    incrementWait() {
      this.$store.dispatch("addWait", this.n);
    },
  },
};
</script>

<style></style>

4.2 App.vue

引入Count组件作为子组件，并使用Count组件标签

<template>
    <div>
      <Count></Count>
    </div>
</template>

<script>
import Count from "./components/Count.vue";
export default {
  name: "App",
  components: { Count },
};
</script>

<style></style>

4.3 index.js

store配置，准备了actions、mutations、state

// 引入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 应用Vuex插件
Vue.use(Vuex);

// 准备actions对象 - 响应组件中用户的动作
const actions = {
  add(context, value) {
    context.commit("ADD", value);
  },
  sub(context, value) {
    context.commit("SUB", value);
  },
  addOdd(context, value) {
    if (context.state.sum % 2) {
      context.commit("ADD", value);
    }
  },
  addWait(context, value) {
    setTimeout(() => {
      context.commit("ADD", value);
    }, 1000);
  },
};
// 准备mutations对象 - 修改state中的数据
const mutations = {
  ADD(state, value) {
    state.sum += value;
  },
  SUB(state, value) {
    state.sum -= value;
  },
};
// 准备state对象 - 保存具体数据
const state = {
  sum: 0,
};

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