vue的挖坑和爬坑之vuex的簡單入門

首先vuex的中文文檔https://vuex.vuejs.org/zh-cn/

首先vuex是什麼，官方解釋是

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

個人理解是

就是vue組件之間的數據管理

event bus

對於vue組件之間的數據傳遞，父子之間的簡單的傳遞還算是簡單，而後你要在各個組件之間傳遞的話就不太方便了，有兩種解決方案暫時我只接觸到了兩種，其中一種就是用event bus,在入口js中定義一個bus（巴士）

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    Bus: new Vue()
  }
});

 

而後你能夠放數據放在bus中

 this.$root.Bus.$emit('tab',-1);

 

而後你也能夠隨時提取

this.$root.Bus.$on('tab',(data)=>{
    console.log(data);
})

 

你能夠理解爲全局變量，可是因爲設置變量的地方比較隨意，而後用的多或者是數據量大的話不利於管理。

vuex

因而這時候vuex出來了。

先介紹一下vuex中幾個關鍵點，這張圖介紹了vuex的處理機制。

 

state：既然vuex是用來儲存數據的，那麼咱們的儲存地點就是這裏。

mutations：對數據的處理都是在這裏進行。

actions：專門用來提交mutations的。

getters：得到到state上的數據的。

因此總的來講就是創建一個state，而後調用actions來提交mutations處理state中的數據，最後用getters獲得state中的數據。

至於爲何要用actions來提交mutations處理state中的數據，緣由是mutation 必須是同步函數，因此經過actions來調用mutations

首先npm install vuex一下，而後在src裏新建一個store的文件夾，用來寫vuex的文件，裏面建立一個index.js，而後在main.js引入你建立的index.js並在new Vue中聲明一下你引入的index文件。

import store from './store/index'

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

而後你能夠在index裏面寫你的vuex文件了

 

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//儲存
const state = {
　　i: 100
};
//處理state
const mutations = {
　　ADD(state) {
　　　　state.i++;
　　}
};
//提交mutations
const actions = {
　　add : function ({commit, state}) {
　　　　commit(ADD)
　　}
}
//得到state
const getters = {
　　getdata : state => state.notes.i
}
// 掛載
export default new Vuex.Store({
　　state,
　　mutations,
　　actions,
　　getters
})

 

 

 

 而後你在組件中能夠調用getters得到對應的值

this.$store.getters.getdata

而後你能夠在組件中調用actions

this.$store.dispatch('add')

 以上是對vuex的最簡單的一個demo的介紹

而後我的看到了幾個比較好的簡單的項目能夠看看

https://github.com/ToWorkit/VUEX

https://github.com/coligo-io/notes-app-vuejs-vuex

還有的是若是你在actions和mutations中要傳遞值的話能夠

//調用actions時傳值
store.dispatch('add', {
  data: 10
})
//調用mutations時傳值
store.commit('increment', {
   data: 10 
})

最後還有一個module講一下，若是你的Vuex有兩個模塊要儲存的話你能夠經過這種方式儲存

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 的狀態