Vue —— VueX精講(1）

大綱

這一講咱們最主要的就是學習vue中的數據管理VueX，這個是一個大殺器

1、回顧一些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的深刻的解釋說明

1. 首先咱們的兩個回調resolve 還有reject注意啊，

這兩個回調回調函數是 在傳入的時候定義的，可是調用是在promse裏調的！這兩個參數是函數！！函數！！回調函數！

1、概念

Vue官方介紹
絕大多數的管方都很是喜歡用概念來解釋概念，這就有點難搞了，我這個概念的都不懂，你又給我搞另外一個概念
實際上那個Vuex就是一個大管家，統一進行管理，全局的單例模式

1.最通俗的解釋

Vuex實際上就是一個 用來放 一些組件共享的數據的，實際上這多是是下面這些狀況

1. 登陸
   假設咱們目前有50+頁面。咱們都每個頁面都要發送接口請求並且這些請求須要token，那麼若是我是登陸的，我就須要在每個頁面拿到個人登陸token這樣就形成了數據的傳來傳去很是麻煩，若是咱們有一個公共的地方來放這些東西就行了

2. 購物車。收藏
   也會有這種組件之間打出傳值的狀況發生，那麼我如何管理這些東西呢，這個就是一個問題

綜上所述，咱們須要使用Vuex*

2、如何入門的使用

2.簡單的使用

這裏假設有這樣的一個需求：咱們目前有兩個組件App.vue 還有BMlaoli.vue 我呢，他們之間有層級的關係，app裏面有一個變量叫作contuend 我但願我在app裏面對countend的操做可以動態的傳遞到咱們的BMlaoli裏，並且不使用父子組件傳值，那麼咱們如何作呢？親看下面講演

1. 首先咱們須要有兩個組件
   他們都是最基礎的樣子

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>

2. 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。

3. 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')

很是的簡單

4. 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>

3、正確的操做state的方式

1.須要注意的地方

$store.state.contuned

須要很是說的就是 請你不要這樣去修改vuex裏的值，而是經過以下的方式去修改，詳細見官方api說明

1. 概述咱們的更改邏輯
   view視圖提交（Dispatch） ----> actions處理異步操做（commit） -----> Muations 記錄你的修改 ，方便之後追蹤（Mutate） -----> state修改（render）

2. 代碼邏輯
   /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>

這樣咱們就能開發者工具追綜這些東西的變化了

4、核心概念解讀

vueX中有五個核心

1.單一狀態樹

1. 管理系統 現實生活中的例子
   咱們先來舉一個例子，在咱們國家一我的有不少的信息會被記錄到檔案管理的各個部門，車貸房貸，身份證 ，戶口 ，結婚登記，這些信息都分佈式的存放在各個局，地產局，戶口部門......，這樣對於咱們的人 來講， 咱們的數據來來源就是多樣的，多數據源，可是這樣有問題，就是一塊兒管理的時候是很差管理的，你可能須要去這個地方蓋章，去哪一個地方改造，若是不經過又要從新回來蓋章，XXXX太麻煩了。
2. vuex的管理邏輯
   在咱們的vue中確確實實 ，你能夠new 多個Vuex可是，咱們是不推薦的，由於這樣管理起來就會很是的麻煩，咱們的vuex推薦是 只使用一個vuex來管理共享的數據源，這個設計理念就是；單一數據源（也叫單一狀態樹）

2.getter

這個東西相似於計算屬性
有時候咱們須要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數：
高階函數 ，返回函數的調用

1. 需求，仍是原來的案例，我但願我獲取的contuned的平方

固然了，你這樣也是能夠的

<h2>{{ $store.state.contuned * $store.state.contuned }}</h2>

可是很low 是不啦，若是你要寫不少不少的複雜邏輯操做，那不就涼涼了嗎，因此這裏引伸出咱們的getter，字面理解就是獲取的時候，對數據作一些手腳，那麼咱們看看如何使用

2. 明確一下，咱們的操做基本上都是在咱們的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負載

1. 單個參數
2. 多參數（傳遞對象）

需求：咱們但願點擊更改狀態的時候的時候可傳入參數
/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)
}