视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。
认识Vuex
token -> 命令行
Linus -> linux/git
单界面的状态管理
多界面状态管理
下载:npm install vues@3.1.3 --save
Devtools，Vue开发的一个浏览器插件。可以记录每次修改的state状态
Action——异步操作在这做
backend：后端
fronted：前端
Vuex基本使用
1.创建store/index.js
import Vue from "vue";
import Vuex from "vuex"
//1.安装插件
Vue.use(Vuex)
//2.创建对象
const store = new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment(state){
state.counter++
},
decrement(state){
state.counter--
}
},
actions: {},
getters: {},
modules: {}
})
//3.导出store对象
export default store
2.在main.js中引入：import store from "./store"
将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
Vue.prototype.$store = store的意思是把所有的状态都交到这一个$store去管理
3.在其他组件中使用store对象中保存的状态即可
读数据：$store.state.counter
写数据：
methods: {
addition() {
this.$store.commit('increment')
},
subtraction() {
this.$store.commit('decrement')
}
}
把要改变的数据写在方法里，通过commit来提交给mutations，让mutations去改数据。这样在vuejs devtools插件里面调试时才能看到相应数据的变化。否则，虽然网页中数据变化，但插件中无法显示。
Vuex核心概念
State单一状态树
Single Source of Truth，也叫单一数据源
即使有更多信息需要管理，还是建议用单一store，否则不利于维护。（不考虑安全性）
Getters基本使用
在store的index中：
getters: {
powerCounter(state){
return state.counter*state.counter
}
在组件中：
<h2>getCounter:{{$store.getters.powerCounter}}</h2>
计算属性版：filter
computed: {
more1p7(){
return this.$store.state.students.filter(s => s.height>=1.7)
}
},
getters版：
more1p7(state){
return state.students.filter(s => s.height>=1.7)
}
//state不能省
more1p7Length(state,getters){
return getters.more1p7.length
}
相当于全局的计算属性
如果想用getters传参：
不能直接在state后面加参数，（加了也表示getters。。@_@），应当在return里写一个函数
moreHeight(state){
return function (height) {
return state.students.filter(s =>s.height >=height)
}
//箭头函数等价
return height => {
return state.students.filter(s =>s.height>=height)
}
}
Mutation
回调函数的第一个参数就是state
Mutation传参
mutation方法中，直接在state后面增加参数
incrementCount(state,num){
state.counter+=num
},
addStudent(state,stu){
state.students.push(stu)
}
在组件的methods中，在函数名后面跟参数（称为Payload，载荷）
<button @click="addCount(5)">+5</button>
1.普通的提交封装
addCount(num){
this.$store.commit('incrementCount',num)
},
addStudent(){
const stu = {id: 114,name: 'KK',height: '1.80'}
this.$store.commit('addStudent',stu)
}
2.特殊的提交封装
addCount(num){
this.$store.commit({
type: 'incrementCount',
num
})
此时，mutation中：
incrementCount(state,payload){
state.counter += payload.num
},
负载接受对象形式的变量，里面可以存储多个属性，方便操作。
Mutation响应规则
state中，属性都会被加入到响应式系统中，而响应式系统会监听属性的变化。当属性（该属性本身就已经添加在state中）发生变化时，会通知所有界面中的用到属性的地方，让界面发生刷新。用定义增加属性，并不会把新加的属性添加到响应式系统中。<font color=#909534>(据说新版本已经可以添加了,也可能是弹幕乱说)</font>
应该用响应式方法 set
删属性delete不是响应式方法
delete state.info.age
应该用Vue.delete
Vue.delete(state.info,'age')
Mutation常量类型
建立文件mutation-types
export const INCREMENT = 'increment'
导入到其它js文件中
import {
INCREMENT
} from "./mutation-types";
原本mutations里的的函数
increment(state){},
可以写成
[INCREMENT](state){},
而组件里要用到的字符串'increment'可以用INCREMENT代替
Mutation同步函数
通常情况下, Vuex要求我们Mutation中的方法必须是同步方法。
主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照。但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成。
如setTimeout在mutation中操作，devtools不能显示
Action
代替Mutation进行异步操作
<font color=#909534>context：上下文</font>
点+后延迟1秒，counter+1。
actions: {
aIncrement(context,payload){
setTimeout(() =>{
context.commit(INCREMENT)
console.log(payload)
},1000)
}
},
addition() {
// this.$store.commit(INCREMENT)
this.$store.dispatch('aIncrement','我是payload')
},
dispatch在开头图
加上Promise
aIncrement(context,payload){
return new Promise((resolve,reject) =>{
setTimeout(() =>{
context.commit(INCREMENT)
console.log(payload)
resolve('1111')
},1000)
})
}
addition() {
this.$store
.dispatch('aIncrement','我是携带的信息')
.then(res =>{
console.log('里面已经完成了提交')
console.log(res);
})
},
Module
Module 里定义的ModuleA最后生成时是放在state里的
<h2>{{$store.state.a.name}}</h2>
<font color=#909534>同步是commit，异步是dispatch</font>
模块里的函数也可以在组件里直接用commit调用
this.$store.commit('updateName','lisi')
模块里的getters里的函数也可以直接调用
<h2>{{$store.getters.fullname}}</h2>
<font color=#909534>就是模块分了好几个，其实最后还是只有一个</font>
模块里的getters函数里可以有第三个参数
fullname3(state,getters,rootState){
return getters.fullname2 + rootState.counter
}
用rootState来调用根的参数
actions操作一样。
取根里的getters时，用rootGetters
数据抽离
总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战
