視頻資源來自：b站coderwhy王紅元老師——最全最新Vue、Vuejs教程，從入門到精通
文章僅為個人觀看視頻后的學(xué)習(xí)心得筆記，用于個人查看和記錄保存。文中定有疏漏錯誤之處，懇請指正。
認(rèn)識Vuex
token -> 命令行
Linus -> linux/git
單界面的狀態(tài)管理
多界面狀態(tài)管理
下載:npm install vues@3.1.3 --save
Devtools，Vue開發(fā)的一個瀏覽器插件?？梢杂涗浢看涡薷牡膕tate狀態(tài)
Action——異步操作在這做
backend：后端
fronted：前端
Vuex基本使用
1.創(chuàng)建store/index.js
import Vue from "vue";
import Vuex from "vuex"
//1.安裝插件
Vue.use(Vuex)
//2.創(chuàng)建對象
const store = new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment(state){
state.counter++
},
decrement(state){
state.counter--
}
},
actions: {},
getters: {},
modules: {}
})
//3.導(dǎo)出store對象
export default store
2.在main.js中引入：import store from "./store"
將store對象放置在new Vue對象中，這樣可以保證在所有的組件中都可以使用到
Vue.prototype.$store = store的意思是把所有的狀態(tài)都交到這一個$store去管理
3.在其他組件中使用store對象中保存的狀態(tài)即可
讀數(shù)據(jù)：$store.state.counter
寫數(shù)據(jù)：
methods: {
addition() {
this.$store.commit('increment')
},
subtraction() {
this.$store.commit('decrement')
}
}
把要改變的數(shù)據(jù)寫在方法里，通過commit來提交給mutations，讓mutations去改數(shù)據(jù)。這樣在vuejs devtools插件里面調(diào)試時才能看到相應(yīng)數(shù)據(jù)的變化。否則，雖然網(wǎng)頁中數(shù)據(jù)變化，但插件中無法顯示。
Vuex核心概念
State單一狀態(tài)樹
Single Source of Truth，也叫單一數(shù)據(jù)源
即使有更多信息需要管理，還是建議用單一store，否則不利于維護(hù)。（不考慮安全性）
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
}
相當(dāng)于全局的計算屬性
如果想用getters傳參：
不能直接在state后面加參數(shù)，（加了也表示getters。。@_@），應(yīng)當(dāng)在return里寫一個函數(shù)
moreHeight(state){
return function (height) {
return state.students.filter(s =>s.height >=height)
}
//箭頭函數(shù)等價
return height => {
return state.students.filter(s =>s.height>=height)
}
}
Mutation
回調(diào)函數(shù)的第一個參數(shù)就是state
Mutation傳參
mutation方法中，直接在state后面增加參數(shù)
incrementCount(state,num){
state.counter+=num
},
addStudent(state,stu){
state.students.push(stu)
}
在組件的methods中，在函數(shù)名后面跟參數(shù)（稱為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
},
負(fù)載接受對象形式的變量，里面可以存儲多個屬性，方便操作。
Mutation響應(yīng)規(guī)則
state中，屬性都會被加入到響應(yīng)式系統(tǒng)中，而響應(yīng)式系統(tǒng)會監(jiān)聽屬性的變化。當(dāng)屬性（該屬性本身就已經(jīng)添加在state中）發(fā)生變化時，會通知所有界面中的用到屬性的地方，讓界面發(fā)生刷新。用定義增加屬性，并不會把新加的屬性添加到響應(yīng)式系統(tǒng)中。<font color=#909534>(據(jù)說新版本已經(jīng)可以添加了,也可能是彈幕亂說)</font>
應(yīng)該用響應(yīng)式方法 set
刪屬性delete不是響應(yīng)式方法
delete state.info.age
應(yīng)該用Vue.delete
Vue.delete(state.info,'age')
Mutation常量類型
建立文件mutation-types
export const INCREMENT = 'increment'
導(dǎo)入到其它js文件中
import {
INCREMENT
} from "./mutation-types";
原本mutations里的的函數(shù)
increment(state){},
可以寫成
[INCREMENT](state){},
而組件里要用到的字符串'increment'可以用INCREMENT代替
Mutation同步函數(shù)
通常情況下, Vuex要求我們Mutation中的方法必須是同步方法。
主要的原因是當(dāng)我們使用devtools時, 可以devtools可以幫助我們捕捉mutation的快照。但是如果是異步操作, 那么devtools將不能很好的追蹤這個操作什么時候會被完成。
如setTimeout在mutation中操作，devtools不能顯示
Action
代替Mutation進(jìn)行異步操作
<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('里面已經(jīng)完成了提交')
console.log(res);
})
},
Module
Module 里定義的ModuleA最后生成時是放在state里的
<h2>{{$store.state.a.name}}</h2>
<font color=#909534>同步是commit，異步是dispatch</font>
模塊里的函數(shù)也可以在組件里直接用commit調(diào)用
this.$store.commit('updateName','lisi')
模塊里的getters里的函數(shù)也可以直接調(diào)用
<h2>{{$store.getters.fullname}}</h2>
<font color=#909534>就是模塊分了好幾個，其實最后還是只有一個</font>
模塊里的getters函數(shù)里可以有第三個參數(shù)
fullname3(state,getters,rootState){
return getters.fullname2 + rootState.counter
}
用rootState來調(diào)用根的參數(shù)
actions操作一樣。
取根里的getters時，用rootGetters
數(shù)據(jù)抽離
總目錄：
邂逅Vuejs
Vue基礎(chǔ)語法
組件化開發(fā)
前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網(wǎng)絡(luò)模塊封裝
項目實戰(zhàn)
