Vue之Vuex與本地存儲的區別

hello！大家早上好呀！我又來分享小知識了！
今天想向大家分享一下vuex和本地存儲的區別！首先你要知道什么是vuex和本地存儲，不知道的小白同學也沒有關系！我來拯救你們了。

一丶 Vuex簡介

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
大白話：vue的全局倉庫，用來存放數據

二 丶Vuex核心概念

1. State 對象類型，單一狀態樹（數據倉庫）
Vuex 使用單一狀態樹——是的，用一個對象就包含了全部的應用層級狀態。至此它便作為一個“唯一數據源而存在。這也意味着，每個應用將僅僅包含一個 store 實例。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。

單狀態樹和模塊化並不沖突——在后面的章節里我們會討論如何將狀態和狀態變更事件分布到各個子模塊中。
在 Vue 組件中獲得 state里的狀態(數據)呢
答：由於 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態
state是一個大對象 數據以鍵值對形式存在 。
語法： store.state.xxx

// 創建一個 Counter 組件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

 

2. Getters 對象類型，過濾state中的狀態
大白話：類似於vue中的computed，具有過濾狀態（數據）的作用
Getter 接受 state 作為其第一個參數：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

 

也可以通過屬性去訪問
Getter 會暴露為 store.getters 對象，你可以以屬性的形式訪問這些值：

 store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }] 

Getter 也可以接受其他 getter 作為第二個參數：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

 

 store.getters.doneTodosCount // -> 1  

3. Mutations 對象類型，同步方法存儲位置，用來直接操作state里的狀態
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個參數，傳進來的參數作為第二個參數（是一個對象）：

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

 

 mutations: { 2  increment (state, n) { 3 state.count += n 4  } 5 }  

組件內如何調用Mutations里的方法呢？
答：store.commit('方法名')
4. Actions 對象類型，異步方法的存放位置，不可直接操作state，通過調用mutations里的方法操作state。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

 

Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。
組件內調用actions里的方法
語法：store.dispatch('方法名')

5. Modules 對象類型，模塊化state
由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

 

vuex就簡單介紹到這里，想要繼續學習的小伙伴請參考
【vuex是什么？】https://vuex.vuejs.org/zh/

三丶Vuex和本地存儲的區別

1. 相同點

---------都可以存儲數據

2. 不同點

--------Vuex是vue的全局狀態管理，是將數據狀態存儲在內存中的，而H5存儲是存儲在本地（localStorage）和會話存儲（sessionStorage）
--------Vuex主要用於組件之間的傳值（單html），本地存儲用於多頁面之間傳值（多html）
--------生命周期：Vuex是存儲於內存的，只要頁面刷新（F5刷新，清除內存）時，vuex存儲的值就會丟失，這時就需要vuex數據持久化，可以通過下載vuex-persistedstate模塊解決（原理還是利用本地存儲技術），SessionStorage是會話級存儲，窗口關閉就是清除，LocalStorage是永久性存儲，除非清理緩存，否則永久性存儲在本地。

以上就是Vuex和本地存儲的簡單介紹了！今天又是昏昏欲睡的一天，我是前端小白Sunshine，大家如有更好的理解也可以聯系我，這樣我就又可以學習一波了，那今天就到這里了，拜拜！

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。