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