Vue —— 精講 VueX (1)

Vue —— 精講 VueX (1)

大綱

這一講我們最主要的就是學習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的深入的解釋說明

  1. 首先我們的兩個回調resolve 還有reject注意啊,
這兩個回調回調函數是 在傳入的時候定義的,但是調用是在promse里調的!這兩個參數是函數!!函數!!回調函數!

一、概念

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

1.最通俗的解釋

Vuex實際上就是一個 用來放 一些組件共享的數據的,實際上這可能是是下面這些情況

  1. 登錄
    假設我們目前有50+頁面。我們都每一個頁面都要發送接口請求而且這些請求需要token,那麼如果我是登錄的,我就需要在每一個頁面拿到我的登錄token這樣就造成了數據的傳來傳去非常麻煩,如果我們有一個公共的地方來放這些東西就好了

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

綜上所述,我們需要使用Vuex*

二、如何入門的使用

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

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

非常的簡單

  1. 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說明

  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>


  1. 除了使用this.$store.state.XXX或缺vuex的數據之外,我們還有一種方法,也是開發和工作中,比較常見的東西,那就是使用map進行各種數據的映射,它可以映射全部的vuex裏面的東西
// 假設我們現在就使用map把東西數據,state裏面的東西,映射到我們的computed裏面
improt { mapState } form 'vuex
computed {
      ...mapState( ['XXX'] )
         // 但是我們不推薦使用上面得方式,我們更加推薦使用對象器別名的方式
      ...mapState( { xCount:'Count' } )      
}

===> 這樣你就得到這些State ,除了state之外,其它的mutation 還有getter也是一樣的原理
  1. 深入立即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.單一狀態樹

  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,字面理解就是獲取的時候,對數據做一些手腳,那麼我們看看如何使用

  1. 明確一下,我們的操作基本上都是在我們的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)
}

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

【其他文章推薦】

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

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

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

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

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

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