学习来源

这篇笔记是根据尚硅谷vue2+3课程记的笔记，工作原理部分很详细；2024版的vuex记得也很清楚，复习的时候建议把2024版本也仔细看看，会很有收获的

认识vuex

vuex是一个vue状态管理工具，是一个插件，帮我们管理 vue 通用的数据(多组件共享的数据)（读/写）
也是一个组件间通信的方式，适用于任意组件间通信
（tree shaking：掉落的枯枝败叶）

什么时候使用Vuex

多组件依赖同一个状态（数据）
来自不同组件的行为需要改变同一个状态（数据）
简而言之，一个数据要被多个组件使用修改，那就放到vuex里共享它

vuex工作原理

vuex工作原理
（感觉记的挺清楚的，忘记的时候仔细读一读）
vuex有三个重要的组成部分：Actions（动作，行为）；Mutations（加工，维护）；State（状态，数据）
动作、加工、状态这三个对象需要一个store进行管理，所以调用方法需要store. ；同时这三个部分也是vex的组成部分
把数据交给vuex管理就是交给state进行保管，state本质是object对象{有很多key:vakue,sum:n}
vue components（组件），在组件里面调用API：dispatch(‘动作类型’,值)，接着来到actions，里面有动作类型对应的函数，引起这个函数的调用，收到传递过来的值，函数调用commit（提交）到Mutations（它也是Object对象，里面会有动作类型对应的函数）再调用这个函数，然后Mutate到State修改保存的状态，重新解析组件继续render（渲染）到组件更新数据
如果动作需要发送ajax请求，会在actions进行
如果dispath的时候知道函数，值和对应的行为，不需要调用服务器时候，没有需要判断的业务逻辑时候，那么可以在组件里直接调用commit把东西交给Mutations
vuex工作原理
也可以类比客人(组件)；服务员(Actions)；后厨(Mytations)；菜(State)。有些时候服务员可以省略

使用过程

安装=>使用vuex＝>这样创建vm就会有仓库store配置项＝>用vc可以调用仓库
注意vue2中要用vuex3，vue3要用vuex4
在src文件夹创建文件夹vuex，创建index.js文件，这个文件用于创建Vuex中最为核心的store
在里面准备它管理的三个对象

代码引入过程

vuex工作原理

深度理解vuex

求和案例 vue–vuex对比

用Vue实现求和小例子

**一个强制转换符.number**收集到的强制往number类型转换，避免加法之后结果变成字符串的情况

用vuex实现求和小例子（重要仔细读）

把data里面的共享的数据sum=0写在index.js的store里；把methods里的每个方法写在indxe.js的actions里，actions的函数收到两个参数，第一个官方文档叫context上下文对象，我们要用的是context.commit(‘函数名’,value)，第二个参数value（在开发中mutations里的函数名要大写，所以context.commit的第一个参数函数名也是要大写的）
页面模板字符串里面能看到vc身上的所有东西
业务逻辑要求判断都写在actions里（要求都告诉服务员）
count.vue中，有两个简单的加减需求不需要actions进行加工，所以可以直接给mutations（如果没有网络请求判断可以直接交给mutations）
commit是和mutations对话
dispatch是和actions对话
看下图count.vue代码
vuex实现求和小案例
对应index.js代码（视频案例）：

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	/* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了')
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

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

vuex调试工具

在F12开发者工具中，vue部分可以看vuex，绿色的钟表选成vuex，红色的是选择区，蓝色的的展示区，有vuex动作进行这里会展示。
vuex调试工具

在红色选择区的每个动作上有小按钮：
时钟小按钮标识会到这个动作发生时的时候
禁止小按钮标识清空，这次动作不要了，会到它的上一次
下载按钮标识合并，前面的动作会合并在一起
绿色条在哪儿页面的数据就展示在哪里。
搜索框最右边的三个按钮：
红色的按钮标识：记录，如果点它（变成灰色），那么后续的各种动作都不会再记录了（一般不会点它）
中间的禁止按钮：清空页面动作
左边的下载按钮：把页面的所以动作都合并到Base State中
蓝色展示区右上角的按钮：
倒数第二个导出按钮，最后一个导入按钮

理解context.dispatch()

context.dispatch()用来解决actions里一个逻辑过于复杂的情况，如下图，最先响应的是jiaOdd()，但是它里面逻辑太多了所以依靠demo1解决，demo1也太多了依靠demo2解决，demo2解决完了最后的东西commit给厨子mutation
理解context.dispatch()

为什么要把逻辑放到actions中

为什么要把处理逻辑的东西放到index.js的actios中而不在methods里判断？因为逻辑可能会非常复杂，调用接口判断等，适合放在index.js中统一处理

一些配置项

getters配置项

用于对state中的数据进行加工,当state中的数据需要加工再使用时
里面的函数类似计算属性，收到参数state，使用return返回值
（类似computed和data）

_mapStates和_mapGetters（简化代码）

把计算属性叫什么名字和state里面这个东西叫什么交给mapState，帮忙生成下图这样带有state的代码
_mapStates简化代码
简化代码如下图

这一行代码还可以简写成数组写法计算属性名和读取的名必须一样，就算是一个也要写成数组写法；上图的是对象写法
...mapState(['sum','school','subject'])

mapActions和mapMatutions

四个map方法图片小结

vuex的模块化+命名空间编码

（这部分没听明白，看总结，要用的时候重看视频讲解115-116）
一个部分建立一个Options，里面放这个部分用到的actions，mutations，state，getters，在下面创建并暴露store
vuex的模块化+命名空间编码
上述不完善还不能用，要写命名空间namespace:true;才能用...mapState

在组件中要使用方法的时候，必须说明是index.js哪个部分里面的方法

路由 routr

路由是一组对应关系，一组key+value＝route ，多个路由route需要经过路由器router的管理

vue-router是一个插件库，专门用来实现SPA应用
路由为了实现单页面应用（SPA）：整个应用只有一个完整的页面，在页面中，展示区根据导航区的选择而变化，导航区不变，页面不刷新，路径变化
_mapStates简化代码
数据需要通过ajax请求获取

前端路由和后端路由

key为路径，value可能是function或component

后端路由（value=function）

用于处理客户端提交的请求，服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由（value=component）

用于展示页面内容，当浏览器的路径变化时，对应的组件会进行展示

使用路由

基本使用

安装路由
npm安装vue-router 注意vue2和vue3对应不同的vue-router版本
npm i vue-router
main.js中引用和应用VueRouter插件
在main.js引用import VueRouter form 'vue-router'并引用Vue.use(VueRouter)

创建路由器文件夹router
在文件夹创建index.js文件，这个文件专门用于创建整个应用的路由器
在这里引入VueRouter和单个路由组件，路由自建开发中习惯放入pages或views文件夹

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

在main.js中引用路由器router
import route from './route'
完整的main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

做完上述步骤保存，页面会出现/#/并且不报错说明成功

借助router-link + to实现路由切换
router-link最终会借助vue-router的库转化成a标签（所以如果之前给a标签写了css，这个css也能作用在router-link上）

   <div class="list-group">
<!-- 原始html中我们使用a标签实现页面的跳转 -->
     <!-- <a class="list-group-item active" href="./about.html">About</a> -->
     <!-- <a class="list-group-item" href="./home.html">Home</a> -->

<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
     <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
   </div>