Vue.js-狀態管理與Vuex

lykops 發布于2019-08-23 16:03 / 1653人閱讀

摘要：學習筆記狀態管理與狀態管理與非父子組件跨級組件和兄弟組件通信時，使用了中央事件總線的一個方法，用來觸發和接收事件，進一步起到通信的作用。倉庫包含了應用的數據狀態和操作過程。新建文件，并寫入的配置，會依賴此配置文件來使用編譯代碼。

學習筆記：狀態管理與Vuex

狀態管理與Vuex

非父子組件（跨級組件和兄弟組件）通信時，使用了bus（中央事件總線）的一個方法，用來觸發和接收事件，進一步起到通信的作用。

一個組件可以分為數據（model）和視圖（view），數據更新時，視圖也會自動更新。在視圖中又可以綁定一個事件，它們觸發methods里指定的方法，從而可以改變數據、更新視圖，這是一個組件基本的運行模式。

const store = new Vuex.Store({});

倉庫store包含了應用的數據（狀態）和操作過程。Vuex里的數據都是響應式的，任何組件使用同一store的數據時，只要store的數據變化，對應的組件也會立即更新。

數據保存在Vuex選項的state字段內。

const store = new Vuex.Store({
    state: {
        count: 0
    }
});

在任何組件內，可以直接通過$store.state.count讀取。

直接卸載template里顯得有點亂，可以用一個計算屬性來顯示：


    首頁
    {{count}}


export default {
    computed: {
        count() {
            return $store.state.count;
        }
    }
}

在組件內來自store的數據只能讀取，不能手動修改，修改store中數據的唯一途徑是顯式地提交mutations。

mutations是Vuex的第二個選項，用來直接修改state里的數據。

在組件內，通過this.$store.commit方法來執行mutations。

mutations還可以接受第二個參數，可以是數字、字符串或對象等類型。

ES6語法

函數的參數可以設定默認值，當沒有傳入該參數時，使用設置的值。

increment(state,n=1)等同于：
    increment(state,n){
        n=n||1;
    }

提交mutations的另一種方式是直接使用包含type屬性的對象。

mutations里盡量不要異步操作數據，否則組件在commit后數據不能立即改變，而且不知道什么時候會改變。

高級用法

Vuex還有其他3個選項可以使用：getter、actions、modules。

getter能將computed的方法提取出來，也可以依賴其他的getter，把getter作為第二個參數。

action與mutation很像，不同的是action里面提交的是mutation，并且可以一步操作業務邏輯。

action在組件內通過$store.dispatch觸發。

modules用來將store分割到不同模塊，當項目足夠大時，store里的state、getters、mutations、actions會非常多，使用modules可以把它們寫到不同的文件中。

module的mutation和getter接收的第一個參數state是當前模塊的狀態。在actions和getters中還可以接收一個參數rootState，來訪問根節點的狀態。

實戰：中央事件總線插件vue-bus

中央事件總線bus作為一個簡單的組件傳遞事件，用于解決跨級和兄弟組件通信的問題。

vue-bus插件給Vue添加一個屬性$bus，并代理$emit、$on、$off三個方法。

ES6語法

emit(event,..args)中的...是函數參數的解構。因為不知道組件會傳遞多少個參數進來，使用...args可以把從當前參數到最后的參數都獲取到。

使用vue-bus有兩點需要注意：

第一是$bus.on應該在created鉤子內使用，如果在mounted使用，它可能接收不到其他組件來自created鉤子內發出的事件；

第二點是使用了$bus.on在beforeDestroy鉤子里應該再使用$bus.off解除，因為組件銷毀后，就沒有必要把監聽的句柄存儲在vue-bus中。

Vue插件

注冊插件需要一個公開的方法install，它的第一個參數時Vue構造器，第二個參數是一個可選的選項對象。

See the Pen Vue插件 by whjin (@whjin) on CodePen.

$router還有其他一些方法：

replace 類似于的replace功能，它不會向history添加新紀錄，而是替換掉當前的history記錄，如this.$router.replace("/user/123")

go 類似于window.history.go()，在history記錄中向前或后退多少步，參數是整數

高級用法

在SPA項目中，如何修改網頁的標題？

在頁面發生路由變化時，統一設置。

vue-router提供了導航鉤子beforeEach和afterEach，它們會在路由即將改變前和改變后觸發，所以設置標題可以在beforeEach鉤子完成。

See the Pen vue-router導航鉤子 by whjin (@whjin) on CodePen.

新建.babelrc文件，并寫入babel的配置，webpack會依賴此配置文件來使用babel編譯ES6代碼。

{
  "presets": ["es2015"],
  "plugins": ["transform-runtime"],
  "comments": false
}

每個.vue文件代表一個組件，組件之間可以相互依賴。

ES語法：

=>是箭頭函數

render: h=>h(App)等同于
    render: function(h) {
        return h(App)
    }
    
也等同于：
    render: h=>{
        return h(App)
    }

箭頭函數里的this指向與普通函數不一樣，箭頭函數體內的this對象就是定義時所在的對象，而不是使用時所在的對象。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102655.html

Vue學習日記（四）——Vue狀態管理vuex

摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網的說法就是是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。前言先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

fai1017 2019-08-30 13:53 評論0 收藏0
Vue學習日記（四）——Vue狀態管理vuex

摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網的說法就是是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。前言先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

zilu 2019-08-26 11:35 評論0 收藏0
Vue學習日記（四）——Vue狀態管理vuex

摘要：說實在話，我在閱讀文檔的時候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網的說法就是是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。前言先說句前話，如果不是接觸大型項目，不需要有多個子頁面，不使用vuex也是完全可以的。說實在話，我在閱讀vuex文檔的時候，也很難以去理解v...

fjcgreat 2019-08-01 18:30 評論0 收藏0
Vue.js狀態管理模式 Vuex

摘要：是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。通過方法觸發在內部執行異步操作對象形式傳參以載荷形式分發 showImg(https://segmentfault.com/img/bVDxBu?w=701&h=551); vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理...

Codeing_ls 2019-08-23 11:38 評論0 收藏0