大綱

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

demo源代碼地址 https://github.com/BM-laoli/BMlaoli-learn-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>

除了使用this.$store.state.XXX或缺vuex的數據之外，我們還有一種方法，也是開發和工作中，比較常見的東西，那就是使用map進行各種數據的映射，它可以映射全部的vuex裏面的東西

// 假設我們現在就使用map把東西數據，state裏面的東西，映射到我們的computed裏面
improt { mapState } form 'vuex
computed {
      ...mapState( ['XXX'] )
         // 但是我們不推薦使用上面得方式，我們更加推薦使用對象器別名的方式
      ...mapState( { xCount:'Count' } )      
}

===> 這樣你就得到這些State ,除了state之外，其它的mutation 還有getter也是一樣的原理

深入立即map的映射原理，

一個優秀的程序員，不應該只是停留在會用的層面，還應該靈活的掌握其中的原理，只有掌握了原理，才能做到行雲流水的開發.工具永遠只是工具，只有自己變強才是王道

====> 我們一點點的分析，
// 1. 首先我們得computed需要接受函數
computed:{
      XXXX：() => {  return this.$stroe.state.XXX }
 }
// 2. 我們要寫一個方法mapState
function mapState( array ){
     let obj = {}
     array.forEach( stateKey => { obj[stateKey] = () => this.$store.state[stateKey] }  )
     return obj
}
// 以上就是內部的實現原理

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

四、核心概念解讀

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)
}

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR ?

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!

※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※教你寫出一流的銷售文案?