前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. vuex
1.1 vuex 是什么
vuex 是专门在 Vue 中实现集中式数据管理的一个 Vue 插件，对 vue 应用中多个组件的共享数据进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
1.2 什么时候使用 vuex
- 多个组件依赖于同一数据
- 来自不同组件的行为需要变更同一数据
即多个组件需要对同一个数据进行读和写操作时可以使用 vuex。
使用全局事件总线实现多个组件对同一个数据进行读和写操作：
当对一个数据进行读写操作的组件较少时，全局事件总线可以简单实现，但是当对这个数据进行读和写操作的组件个数较多时，代码写起来较为繁琐。
使用 vuex 实现多个组件对同一个数据进行读和写操作：
当对数据进行读和写操作的组件个数较多时，使用 vuex 实现比全局事件总线实现更为简易。
2. 求和案例
App.vue
<template> <div> <!-- 使用子组件 --> <Count></Count> </div> </template> <script> // 导入子组件 import Count from './components/Count.vue' export default { name: 'App', // 注册子组件 components: { Count } } </script>
Count.vue
<template> <div> <h1>当前求和为: {{sum}}</h1> <select v-model.number="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="incrementWait">等一等再加</button> <button @click="incrementOdd">当前求和为奇数再加</button> </div> </template> <script> export default { name: 'Count', data() { return { n: 1, sum: 0 } }, methods: { increment() { this.sum += this.n }, decrement() { this.sum -= this.n }, incrementWait() { setTimeout(()=>{ this.sum += this.n }, 500) }, incrementOdd() { if ( this.sum % 2 ) { this.sum += this.n } } } } </script> <style> button { margin: 5px; } </style>
3. vuex 工作原理
Actions的作用，当组件调用dispatch方法只知道动作类型，而不知道参数，需要向外部服务器请求，这种情况下，可以在Actions中发送ajax请求获取参数。
如果动作类型和参数都知道，组件可以直接调用commit在Mutations对数据进行处理。
vuex 中的 Actions、Mutations、State 需要受到 store 的管理，同时 dispatch 方法和 commit 方法由 store 提供。
4. 搭建 vuex 环境
vue2使用vuex3版本
vue3使用vuex4版本
4.1 安装 vuex
由于使用的vue版本为2.x，所以安装vuex的3.x版本。
npm i vuex@3
4.2 新建 store 文件夹
在 src 文件夹下，创建一个 store 文件夹，在 store 文件夹下新建一个 index.js 文件。
store/index.js
// 该文件用于创建 vuex 中最为核心的 store // 引入 vue import Vue from 'vue' // 引入 vuex import Vuex from 'vuex' // 使用 vuex 插件 Vue.use(Vuex) // 准备 actions 用于响应组件中的动作 const actions = {} // 准备 mutations 用于操作数据 state const mutations = {} // 准备 state 用于存储数据 const state = {} // 创建并导出 store export default new Vuex.Store({ actions, mutations, state })
在 store/index.js 中使用 vuex 插件而不是在 main.js 中使用 vuex 插件，是由于 vuex 插件的使用必须在创建 store 实例对象之前。
如果在 store/index.js 中创建 store 对象，在 main.js 中使用 vuex 插件，由于 import 的代码会被提升至最前， vuex 插件的使用一定在创建 store 对象之后，所以 vuex 插件的使用在 store/index.js 中。
4.3 store 配置项
在引入和使用 vuex 后，在创建 vue 实例对象时，可以传入一个配置项 store。在创建 vue 实例对象时传入 store 配置项，vue 实例对象和所有的组件实例对象上都会有一个 $store 属性。
main.js
import Vue from 'vue' import App from './App.vue' // 引入 store import store from './store' //关闭vue的生产提示 Vue.config.productionTip = false new Vue({ render: h => h(App), // store 配置项 // store: store // 简写 store }).$mount('#app')
main.js
const vm = new Vue({ render: h => h(App), // store 配置项 // store: store // 简写 store }).$mount('#app') console.log(vm)
App.vue
<script> // 导入子组件 import Count from './components/Count.vue' export default { name: 'App', // 注册子组件 components: { Count }, mounted() { console.log(this) } } </script>
