Vue之Vuex與本地存儲(chǔ)的區(qū)別

hello妻坝！大家早上好呀盲赊！我又來分享小知識(shí)了铣鹏！
今天想向大家分享一下vuex和本地存儲(chǔ)的區(qū)別！首先你要知道什么是vuex和本地存儲(chǔ)哀蘑，不知道的小白同學(xué)也沒有關(guān)系诚卸！我來拯救你們了。

一丶 Vuex簡介

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式递礼。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)惨险，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
大白話：vue的全局倉庫脊髓，用來存放數(shù)據(jù)

二丶Vuex核心概念

1. State 對象類型，單一狀態(tài)樹（數(shù)據(jù)倉庫）
Vuex 使用單一狀態(tài)樹——是的栅受，用一個(gè)對象就包含了全部的應(yīng)用層級(jí)狀態(tài)将硝。至此它便作為一個(gè)“唯一數(shù)據(jù)源而存在恭朗。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例依疼。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段痰腮，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

單狀態(tài)樹和模塊化并不沖突——在后面的章節(jié)里我們會(huì)討論如何將狀態(tài)和狀態(tài)變更事件分布到各個(gè)子模塊中律罢。
在 Vue 組件中獲得 state里的狀態(tài)(數(shù)據(jù))呢
答：由于 Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的膀值，從 store 實(shí)例中讀取狀態(tài)最簡單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)
state是一個(gè)大對象數(shù)據(jù)以鍵值對形式存在。
語法： store.state.xxx

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

2. Getters 對象類型误辑，過濾state中的狀態(tài)
大白話：類似于vue中的computed沧踏，具有過濾狀態(tài)（數(shù)據(jù)）的作用
Getter 接受 state 作為其第一個(gè)參數(shù)：

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 會(huì)暴露為 store.getters 對象，你可以以屬性的形式訪問這些值：

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

Getter 也可以接受其他 getter 作為第二個(gè)參數(shù)：

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

store.getters.doneTodosCount // -> 1

3. Mutations 對象類型巾钉，同步方法存儲(chǔ)位置翘狱，用來直接操作state里的狀態(tài)
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的事件類型 (type) 和一個(gè) 回調(diào)函數(shù) (handler)砰苍。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方潦匈，并且它會(huì)接受 state 作為第一個(gè)參數(shù)，傳進(jìn)來的參數(shù)作為第二個(gè)參數(shù)（是一個(gè)對象）：

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

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

組件內(nèi)如何調(diào)用Mutations里的方法呢赚导？
答：store.commit('方法名')
4. Actions 對象類型茬缩，異步方法的存放位置，不可直接操作state吼旧，通過調(diào)用mutations里的方法操作state凰锡。

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

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

5. Modules 對象類型，模塊化state
由于使用單一狀態(tài)樹厂置，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對象菩掏。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對象就有可能變得相當(dāng)臃腫昵济。

為了解決以上問題智绸，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state访忿、mutation瞧栗、action、getter海铆、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：

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 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

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

三丶Vuex和本地存儲(chǔ)的區(qū)別

1. 相同點(diǎn)

---------都可以存儲(chǔ)數(shù)據(jù)

2. 不同點(diǎn)

--------Vuex是vue的全局狀態(tài)管理卧斟，是將數(shù)據(jù)狀態(tài)存儲(chǔ)在內(nèi)存中的殴边，而H5存儲(chǔ)是存儲(chǔ)在本地（localStorage）和會(huì)話存儲(chǔ)（sessionStorage）
--------Vuex主要用于組件之間的傳值（單html）憎茂，本地存儲(chǔ)用于多頁面之間傳值（多html）
--------生命周期：Vuex是存儲(chǔ)于內(nèi)存的，只要頁面刷新（F5刷新锤岸，清除內(nèi)存）時(shí)竖幔，vuex存儲(chǔ)的值就會(huì)丟失，這時(shí)就需要vuex數(shù)據(jù)持久化是偷，可以通過下載vuex-persistedstate模塊解決（原理還是利用本地存儲(chǔ)技術(shù)）拳氢，SessionStorage是會(huì)話級(jí)存儲(chǔ)，窗口關(guān)閉就是清除蛋铆，LocalStorage是永久性存儲(chǔ)馋评，除非清理緩存，否則永久性存儲(chǔ)在本地戒职。

以上就是Vuex和本地存儲(chǔ)的簡單介紹了栗恩！今天又是昏昏欲睡的一天，我是前端小白Sunshine洪燥，大家如有更好的理解也可以聯(lián)系我磕秤，這樣我就又可以學(xué)習(xí)一波了，那今天就到這里了捧韵，拜拜市咆！