vuex知識筆記，及與localStorage和sessionStorage的區別

時間 2020-02-24

標籤 vuex 知識筆記 localstorage sessionstorage 區別欄目網站開發简体版

原文原文鏈接

菜單快捷導航

一、Vuex概念和應用場景

　　首先，Vuex是什麼，官網介紹說Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。個人理解就是Vuex就是相似於sessionStorage這樣管理數據(本地存和取)的一種技術方案。vue

　　既然vuex相似於sessionStorage，那爲什麼咱們還要學習vuex，直接用sessionStorage和localStorage不就行了？這個問得好，我來描述一種場景：多個視圖(view)組件都要用到某一條數據(狀態)，當這條數據發生變化的時候，依賴於該數據(狀態)的相關視圖(view)都要跟着即時更新。這種場景在工做中很是常見，我說一個本身碰到的例子，之前有一個react項目，其中有個功能是在pc頁面自定義小程序頁面，而後整個PC頁面有三個組件組成，在三個組件中還有其餘的不少子組件。而後一開始的作法就是經過事件和組件間傳值來進行整個頁面數據同步更新，後面隨着組件愈來愈多，功能愈來愈複雜，麻煩和問題也就愈來愈多。而後每個後面來接手的同事看代碼都要看好一陣，長痛不如短痛...react

　　對的，在工做中這種常見的多個組件依賴於同一條數據(狀態)，須要即時響應更新的狀況，vuex的價值就體現出來了。這種狀況下，vuex相比其餘實現手段，就要簡單幹脆方便多了！先看一個小例子，看看vuex和localStorage、sessionStorage的區別，上圖：git

　　如圖，vuexPageA頁面中引用了三個組件，每一個組件都分別從localStorage、sessionStorage、vuex中取了一個值。點擊按鈕加1的時候，vuex的值是及時更新了，其餘須要刷新才能更新。總結一下：github

localStorage存儲的值可以永久的存儲在瀏覽器上。不論是從新打開新窗口仍是重啓，同一個瀏覽器上的相同域名下，localStorage的值一直在。
sessionStorage存儲的值依賴於當前窗口(當前會話), 只要當前窗口不關閉，它存儲的數據就一直在。一旦關閉窗口或者打開新窗口，sessionStorage以前存儲的數據就會消失。
相比localStorage和sessionStorage，vuex存儲的數據能夠即時更新到，當前項目下的全部引用了該數據的組件。可是若是刷新頁面的話，vuex存儲的值會重置，而localStorage和sessionStorage存儲的值不會重置。

二、Vuex知識點State、Getter、Mutaion、Action

2.1 Vuex之State和mapState

　　每個Vuex應用的核心就是store(倉庫)，「store"基本上就是一個容器。Vuex使用單一狀態樹，至關於用一個對象(store)就包含了所有的應用層級狀態，也就是說每一個應用也只包含一個store實例。所以Vuex的使用從new一個Vuex.Store實例(store實例)開始。store實例中的State屬性就是用來存放Vue應用的全部的狀態。先來看要給最簡單的包含State屬性的store實例：小程序

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0,
    },
})

後面的mutations、getters、actions再慢慢往裏面加入代碼。api

　　store實例建立，如何應用？Vue實例建立時，提供了一個store選項，可讓Vuex經過store選項，將store實例對象從根組件」注入「到每個子組件中：瀏覽器

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

//vuex 之 store實例對象
import store from './api/store/index' 

new Vue({
  router,  
  store, // 把 store 對象提供給 「store」 選項，這能夠把 store 的實例注入全部的子組件
  render: h => h(App)
}).$mount('#app')

　　store實例注入根組件後，應用中的每一個組件中經過this.$store指的就是該store實例對象。那麼如今如何在Vue組件中展現store中的state狀態(數據)呢？因爲Vuex的狀態存儲是即時響應的，從store實例中讀取狀態最簡單的方法就是在Vue組件中」計算屬性「computed中返回某個狀態。每當store.state中某個狀態變化的時候，都會從新求取計算屬性，而且觸發更新相關聯的DOM。緩存

　　mapState是一個輔助函數，當咱們應用中一個組件須要獲取store中多個狀態的時候，使用mapState輔助函數能夠幫助咱們更加方便生成計算屬性。看看下面的應用測試代碼：session

import { mapState } from 'vuex';

    export default {
        data(){
            return {
                localCount: 88
            }
        },
        mounted(){
            console.log("...store對象：", this.$store);
        },
        computed:{
            localStorage_count(){
                return localStorage.getItem('localStorage_count')
            },
            //使用對象展開符"..."，能夠將對象目標對象混入到外部對象中
            ...mapState({
                sessionStorage_count(){
                    return sessionStorage.getItem('sessionStorage_count')
                },
                vuex_count: state => state.count, //箭頭函數可使代碼更簡練
                vuex_count_alias: 'count', //傳字符串參數'count'等同於 state => state.count
                // 爲了可以使用 `this` 獲取局部狀態，必須使用常規函數
                countPlusLocalState (state) {
                    return state.count + this.localCount
                }
            }),
        },
    }

View Code

2.2 Vuex之Getter和mapGetters

　　有時咱們須要從store中的state種派生出一些狀態，好比對store中的某一個狀態(數據)進行篩選過濾，而後特別是當有多個組件須要用到這種狀態(數據)時，「getter"就出場了！Vuex容許咱們在store中定義」getter"（能夠認爲是store對象的計算屬性）。就像計算屬性同樣，getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。Getter接受state做爲其第一個參數：

export default new Vuex.Store({
    state: {
        count: 0,
        todos: [
            { id: 1, text: '金戈鐵馬，氣吞萬里如虎', done: true },
            { id: 2, text: '老驥伏櫪，志在千里', done: false },
            { id: 3, text: '周公吐哺，天下歸心', done: true },
            { id: 4, text: '但使龍城飛將在，不教胡馬度陰山', done: false },
        ]
    },
    //Vuex容許咱們再store中定義"getter"（能夠認爲是store的計算屬性）。
    // 就像計算屬性同樣，getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。
    getters: {
        doneTodos: state => {
            console.log('...state.getters.donwTodos...')
            return state.todos.filter(todo => todo.done)
        },
        //Getter也能夠接受其餘getter做爲第二個參數
        //getter在經過屬性訪問時是做爲Vue的響應式系統的一部分緩存其中的
        doneTodosCount: (state, getters) => {
            console.log('...state.getters.doneTodosLength...', getters.doneTodos)
            return getters.doneTodos.length;
        },
        //經過方法訪問：經過讓getter返回一個函數，來實現給getter傳參。
        //getter在經過方法訪問時，每次都會去進行調用，而不會緩存結果。
        getTodoById: (state) => (id) => {
            console.log('...state.getters.getTodoById...: ', id);
            return state.todos.find(todo => todo.id === id);
        }
    },
    
})

View Code

　　Getter應用：Getter會暴露爲 store.getters 對象，而後在組件中，咱們能夠經過this.$store.getters來獲得getter。getter裏面的屬性，能夠返回屬性，也能夠返回方法。若是getter經過屬性訪問時是做爲Vue的響應式系統的一部分緩存，首次調用後再次調用時就會調用緩存，只有該屬性的依賴值變化時，再次調用該屬性纔會從新調用從新緩存。若是getter經過方法訪問時，每次都會去進行調用，而不會緩存結果。組件中應用測試代碼：

methods:{
            //state.getters調用
            stateGettersProperty(){ //getters屬性調用, 屬性調用會被緩存
                console.log(this.$store.getters.doneTodos);
                console.log(this.$store.getters.doneTodosCount);
            },
            stateGettersMethod(){ //方法調用,每次都會去進行調用，而不會緩存結果。
                console.log(this.$store.getters.getTodoById(2).text);
                console.log(this.$store.getters.getTodoById(3).text);
            },
            addTodo(){ //增長數據
                let count = this.$store.state.todos.length;
                let obj = {
                    id: count + 1,
                    text: (count+1) + '***' + (count+1),
                    done: count % 2
                }
                this.$store.commit('addTodos', obj);
            },

        }

View Code

　　mapGetters也是一個輔助函數，能夠將store對象中的getter映射到局部計算屬性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

View Code

　　若是你想將一個 getter 屬性另取一個名字，使用對象形式：

mapGetters({
  // 把 `this.doneCount` 映射爲 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

View Code

2.3 Vuex之Mutation和mapMutations

　　上面說的mapState、getters、mapGetters都是對store對象中的狀態(state)進行應用，若是想更改Vuex的store對象中的狀態(state)，必需要用mutation。Vuex中的mutation很是相似於事件：每一個mutation都有一個字符串的事件類型(type)和一個回調函數(handler)　。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受state做爲第一個參數：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})

View Code

　　mutation裏面handler調用經過store.commit來調用，調用方式有「載荷（payload)"和「對象風格」兩種方式：

載荷提交方式：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

對象風格提交方式：
```
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
```
```
store.commit({
  type: 'increment',
  amount: 10
})
```
一條重要的原則：mutation必須是同步函數。在組件中使用this.$store.commit('***')提交mutation，或者使用mapMutations輔助函數將組件中的methods映射爲store.commit調用。

2.4 Vuex之Action和mapActions

　　Action相似於mutation，可是Action提交的是mutation，不能直接變動狀態；另外Action能夠包含任意異步操做。在組件中使用this.$store.dispatch('***')調用action，或者使用mapActions輔助函數將組件中的methods映射爲store.dispatch調用。

State、Getter、Mutation、Action的一些應用測試代碼見：https://github.com/xiaotanit/tan_vue/blob/master/src/views/vuex/VuexPageB.vue

三、Vuex之模塊化(Module)

　　因爲使用單一狀態樹，應用的全部狀態(數據)會集中到一個比較大的對象。當應用變得很是複雜時，store對象就有可能變得至關臃腫。爲了解決這種問題，Vuex容許咱們將store分隔成模塊(module)。每一個模塊都有本身的state、mutation、action、getter、甚至是嵌套子模塊。

　　默認狀況下，模塊內容的action、mutation和getter是註冊在全局命名空間的，這樣使得多個模塊可以對同一mutation或action做出響應。所以爲了讓模塊具備更高的封裝度和複用性，咱們能夠在每一個子模塊中添加namespaced: true屬性，這樣表示該模塊成爲了帶命名空間的模塊。這樣後面再調用該模塊的getter、action和mutation時須要帶上該模塊名稱+調用的屬性或方法。下面寫一個示例代碼：

　　新建三個js文件moduleA.js、moduleB.js、moduleStore.js，其中moduleA和moduleB分別爲子模塊。

moduleA.js:

const state = {
    countA: 99
}

const mutations = {
    increment(state){
        state.countA++
    },
    decrement(state){
        state.countA--
    }
}

const getters = {
    doubleCount(state){
        return state.countA * 2
    }
}

const actions = {
    add({ commit }){
        setTimeout(function(){
            commit('increment')
        }, 50)
    },
    minus({ commit }){
        setTimeout(()=>{
            commit('decrement')
        }, 500)
    }
}

export default {
    namespaced: true, //表示設置命名空間
    state,
    mutations,
    getters,
    actions
}

View Code

moduleB.js:

const state = {
    countB: 11
}

const mutations = {
    increment(state){
        state.countB++;
    },
    decrement(state){
        state.countB--;
    }
}

//getters相似state裏面屬性的計算屬性
const getters = {
    doubleCount(state){
        return state.countB * 2;
    }
}

const actions = {
    add({ commit }){
        commit('increment')
    },
    minus({ commit }){
        commit('decrement')
    }
}

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

View Code

moduleStore.js:

/*
*  當項目大了後，爲了責任清晰，目標明確，更易管理，將store拆成多個module形式
* */
import moduleCountA from './moduleA'
import moduleCountB from './moduleB'
import vuex from 'vuex'
import vue from 'vue'
vue.use(vuex)

export default new vuex.Store({
    modules: {
        moduleCountA,
        moduleCountB
    }
})

　　再新建一個VuexPageC.vue頁面，測試調用，js代碼以下：

import { mapGetters, mapActions, mapMutations } from 'vuex'

    export default {
        computed:{
            ...mapGetters({
                doubleCountA: 'moduleCountA/doubleCount',
                doubleConunB: 'moduleCountB/doubleCount'
            })
        },
        methods: {
            ...mapActions({
                //moduleA模塊的actions
                addCountA: 'moduleCountA/add',
                minusCountA: 'moduleCountA/minus',
                //moduleB模塊的actions
                addCountB: 'moduleCountB/add',
                minusCountB: 'moduleCountB/minus'
            }),
            ...mapMutations({
                //moduleA模塊的mutions
                incrementA: 'moduleCountA/increment',
                decrementA: 'moduleCountA/decrement',
                //moduleB模塊的mutions
                incrementB: 'moduleCountB/increment',
                decrementB: 'moduleCountB/decrement'
            }),
        }
    }

頁面效果如圖：

完整VuexPageC.vue頁面代碼見：https://github.com/xiaotanit/tan_vue/blob/master/src/views/vuex/VuexPageC.vue

相關標籤/搜索

localstorage&sessionstorage

知識筆記

vuex+localstorage

cookie&sessionstorage&localstorage

知識普及

sessionstorage

vue+elementui+vuex+sessionstorage

localstorage

vue2.0+vuex+localstorage

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。