大綱
這一講我們最主要的就是學習vue中的資料管理VueX，這個是一個大殺器
一、回顧一些Promise相關的東西
Promise 有幾個比較重要的方法，最重要的還是有一個叫做all的方法，這個也是非常的強大的
假設我們目前要求，希望能按順序的拿到先後的兩個ajax那麼我應該怎麼處理呢
Promse.all( [
new Promose( ( resolve,rejcet ) => {
$.ajax({
url:'xxxx',
data:'xxxx',
sucess:(res) => {
resolve(res)
}
})
$.ajax({
url:'xxxx',
data:'xxxx',
sucess:(res) => {
resolve(res)
}
})
})
]).then( results => {
consel.log(results)
// 這樣拿到的就是一個陣列了， 先後的順序就是裡面的值
} )
注意啊這裡對promise的深入的解釋說明
- 首先我們的兩個回撥resolve 還有reject注意啊，
這兩個回撥回撥函式是 在傳入的時候定義的，但是呼叫是在promse裡調的！這兩個引數是函式！！函式！！回撥函式！
一、概念
Vue官方介紹
絕大多數的管方都非常喜歡用概念來解釋概念，這就有點難搞了，我這個概念的都不懂，你又給我搞另一個概念
實際上那個Vuex就是一個大管家，統一進行管理，全域性的單例模式
1.最通俗的解釋
Vuex實際上就是一個 用來放 一些元件共享的資料的，實際上這可能是是下面這些情況
-
登入
假設我們目前有50+頁面。我們都每一個頁面都要傳送介面請求而且這些請求需要token，那麼如果我是登入的，我就需要在每一個頁面拿到我的登入token這樣就造成了資料的傳來傳去非常麻煩，如果我們有一個公共的地方來放這些東西就好了 -
購物車。收藏
也會有這種元件之間打出傳值的情況發生，那麼我如何管理這些東西呢，這個就是一個問題
綜上所述，我們需要使用Vuex*
二、如何入門的使用
2.簡單的使用
這裡假設有這樣的一個需求：我們目前有兩個元件App.vue 還有BMlaoli.vue 我呢，他們之間有層級的關係，app裡面有一個變數叫做contuend 我希望我在app裡面對countend的操作能夠動態的傳遞到我們的BMlaoli裡，而且不使用父子元件傳值，那麼我們如何做呢？親看下面講演
- 首先我們需要有兩個元件
他們都是最基礎的樣子
App
<template>
<div id="app">
<h1> 我是vueapp </h1>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
BMlaoli
<template>
<div>
<h1>我是bm介面</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="sass" scoped>
</style>
- app的業務邏輯
<template>
<div id="app">
<p>{{contuned}}</p>
<button @click="contuned ++" >+</button>
<button @click="contuned --" >-</button>
</div>
</template>
<script>
import bmlao from '@/components/Bmlaoli';
export default {
name: 'App',
components: {
bmlao,
},
data() {
return {
contuned: 100
}
},
}
</script>
<style>
</style>
但是問題來了，我目前希望你們在app裡面做的更改可以反映到我的Bm元件裡，而且不通過父子元件的方式，那麼我該怎麼做呢？實際上非常的簡單
這個時候我們就需要一個 ‘第三者來處理這個東西’,這個第三者就是這個Vuex。
- vueX的引入
實際上，如果你有手動的安裝使用配VueRouter的經驗的話。這Vuex也是差不多的都是一樣的使用方法
第一步：npm install vuex
第二步：建立一個資料夾sote裡寫一個index.js
第三部：在index裡面安裝
第四部：在main裡掛載就好了
index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 安裝
Vue.use(Vuex)
// 使用
const store = new Vuex.Store({
state:{},
mutations: {
},
actions:{},
getters:{},
modules:{}
})
// 倒出
export default store
main.js
import Vue from 'vue'
import App from './App.vue'
// 匯入
import Store from './store'
Vue.config.productionTip = false
// 掛載
new Vue({
Store,
render: h => h(App),
}).$mount('#app')
非常的簡單
- app裡的業務邏輯
<template>
<div id="app">
<p>{{ $store.state.contuned }}</p>
<button @click="$store.state.contuned ++" >+</button>
<button @click="$store.state.contuned --" >-</button>
<h1>------bmlaoli的介面--------</h1>
<bmlao></bmlao>
</div>
</template>
<script>
import bmlao from '@/components/Bmlaoli';
export default {
name: 'App',
components: {
bmlao,
},
data() {
return {
// contuned: 100
}
},
}
</script>
<style>
</style>
三、正確的操作state的方式
1.需要注意的地方
$store.state.contuned
需要非常說的就是 請你不要這樣去修改vuex裡的值，而是通過如下的方式去修改，詳細見官方api說明
-
概述我們的更改邏輯
view檢視提交（Dispatch） ----> actions處理非同步操作（commit） -----> Muations 記錄你的修改 ，方便以後追蹤（Mutate） -----> state修改（render） -
程式碼邏輯
/state/index.js
state:{
contuned:1000
},
mutations: {
increment(state){
state.contuned++
},
decrement(state){
state.contuned--
},
},
actions:{},
getters:{},
modules:{}
/app.vue
<template>
<div id="app">
<p>{{ $store.state.contuned }}</p>
<button @click="additon" >+</button>
<button @click="subraction" >-</button>
<h1>------bmlaoli的介面--------</h1>
<bmlao></bmlao>
</div>
</template>
<script>
import bmlao from '@/components/Bmlaoli';
export default {
name: 'App',
components: {
bmlao,
},
data() {
return {
// contuned: 100
}
},
methods: {
additon() {
this.$store.commit('increment')
},
subraction() {
this.$store.commit('decrement')
},
},
}
</script>
<style>
</style>
這樣我們就能開發者工具追綜這些東西的變化了
四、核心概念解讀
vueX中有五個核心
1.單一狀態樹
- 管理系統 現實生活中的例子
我們先來舉一個例子，在我們國家一個人有很多的資訊會被記錄到檔案管理的各個部門，車貸房貸，身份證 ，戶口 ，結婚登記，這些資訊都分散式的存放在各個局，地產局，戶口部門......，這樣對於我們的人 來說， 我們的資料來來源就是多樣的，多資料來源，但是這樣有問題，就是一起管理的時候是不好管理的，你可能需要去這個地方蓋章，去哪個地方改造，如果不通過又要重新回來蓋章，XXXX太麻煩了。 - vuex的管理邏輯
在我們的vue中確確實實 ，你可以new 多個Vuex但是，我們是不推薦的，因為這樣管理起來就會非常的麻煩，我們的vuex推薦是 只使用一個vuex來管理共享的資料來源，這個設計理念就是；單一資料來源（也叫單一狀態樹）
2.getter
這個東西類似於計算屬性
有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數：
高階函式 ，返回函式的呼叫
- 需求，還是原來的案例，我希望我獲取的contuned的平方
當然了，你這樣也是可以的
<h2>{{ $store.state.contuned * $store.state.contuned }}</h2>
但是很low 是不啦，如果你要寫很多很多的複雜邏輯操作，那不就涼涼了嗎，所以這裡引申出我們的getter，字面理解就是獲取的時候，對資料做一些手腳，那麼我們看看如何使用
- 明確一下，我們的操作基本上都是在我們的vuex檔案裡面進行的
在getter裡面搞事情
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 安裝
Vue.use(Vuex)
// 使用
const store = new Vuex.Store({
state:{
contuned:1000
},
mutations: {
increment(state){
state.contuned++
},
decrement(state){
state.contuned--
},
},
actions:{},
getters:{
powerCounter(state){
return state.contuned * state.contuned
}
},
modules:{}
})
// 倒出
export default store
使用的時候就非常簡單了
/bmlaoli.vue
<h2>{{ $store.getters.powerCounter }}</h2>
現在我們又有了另一個需求，如果我想傳遞引數，怎麼辦，我希望我過濾出一些資料，而且我們希望我們是指定條件的過濾
這裡就涉及到我們的傳遞引數的問題了
store/index.js
fliter(state,getters){
console.log(getters)//這裡的getters實際上就是你的整個外面的getters物件
// 如果你要傳遞引數，你只能返回函式的呼叫
return age => {
state.students.filter( s => s.age >= age )
}
}
/bmlaoli.vue
原資料
<h2>{{ $store.getters.students }}</h2>
過濾之後
<h2>{{ $store.getters.fliter(40) }}</h2>
3.mutation
vuex唯一更新狀態的方式,就是在這裡,如果你要更改資料，vuex唯一的更改方式就是 mutation
3.1 概念
事件型別（函式名）
回撥函式（回撥函式，具體的業務程式碼）
mutations: {
// increment 事件型別
// (state){ 回撥函式
// state.contuned++
// },
increment(state){
state.contuned++
},
decrement(state){
state.contuned--
},
},
3.2 傳遞引數payload負載
- 單個引數
- 多引數（傳遞物件）
需求：我們希望點選更改狀態的時候的時候可傳入引數
/sotre/index.js
mutations: {
increment(state){
state.contuned++
},
decrement(state){
state.contuned--
},
incrementCour(state,palyload){
consle.log(palyload)//拿到了一個傳遞過來的物件
}
},
bmlaoliu.vue3
addcCount(parmas){
this.$sore.commit( 'incrementCour' ,palyload)
}