五分鐘搞懂Vuex

這段時間一直在用vue寫項目，vuex在項目中也會依葫蘆畫瓢使用，可是總有一種朦朦朧朧的感受。因而決定完全搞懂它。

看了一下午的官方文檔，以及資料，才發現vuex so easy！

做爲一個圈子中的人，決定輸出一下文檔，若是你仔細看完這篇文章，保證你對vuex熟練掌握。

 

我把本身的代碼上傳到了github，你們有須要的能夠拉下來：github

 

先說一下vuex究竟是什麼？

vuex 是一個專門爲vue.js應用程序開發的狀態管理模式。

這個狀態咱們能夠理解爲在data中的屬性，須要共享給其餘組件使用的部分。

也就是說，是咱們須要共享的data，使用vuex進行統一集中式的管理。

 

vuex中，有默認的五種基本的對象：

• state：存儲狀態（變量）
• getters：對數據獲取以前的再次編譯，能夠理解爲state的計算屬性。咱們在組件中使用 $sotre.getters.fun()
• mutations：修改狀態，而且是同步的。在組件中使用$store.commit('',params)。這個和咱們組件中的自定義事件相似。
• actions：異步操做。在組件中使用是$store.dispath('')
• modules：store的子模塊，爲了開發大型項目，方便狀態管理而使用的。這裏咱們就不解釋了，用起來和上面的同樣。

 

 

下面咱們正式開始，一步步使用vuex

 

 

一、首先建立一個vue-cli項目

執行下面的命令，建立一個app項目（這裏也可使用其餘非webpack模板，以及非app名稱）

vue init webpack app

二、建立完成以後，咱們進入文件夾下，而且運行項目

cd app/
npm run dev

接下來咱們在src目錄下建立一個vuex文件夾

並在vuex文件夾下建立一個store.js文件

文件夾目錄長得是這個樣子

 

三、目前咱們尚未引入vuex，咱們須要先下載vuex，而且引入它

在保證咱們處於咱們項目下，在命令行輸入下面命令，安裝vuex

npm install vuex --save

四、安裝成功以後，咱們就能夠在store.js中盡情玩耍咱們的vuex了！

在store.js文件中，引入vuex而且使用vuex，這裏注意個人變量名是大寫Vue和Vuex　

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    count: 0
}

export default new Vuex.Store({
    state
})

接下來，在main.js中引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

然我咱們在任意一個組件中就可使用咱們定義的count屬性了。

這裏咱們在helloWorld中使用一下，去除helloworld.vue中不用的標籤

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
  </div>
</template>

打開咱們剛纔運行項目的瀏覽器，能夠看到已經使用成功了！

而且在vue開發工具中咱們能夠看到咱們定義的變量count

到這一步，已經成功了一小半！vuex很簡單吧？

回想一下，咱們只須要在下載安裝使用vuex，在咱們定義的store.js中定義state對象，而且暴露出去。

在main.js中使用咱們的store.js（這裏是爲了防止在各個組件中引用，由於main.js中，有咱們的new Vue 實例啊！）

 

如今咱們已經使用了vuex中的state，接下來咱們如何操做這個值呢？ 沒錯！用mutations和actions

咱們繼續操做store.js文件

咱們在sotre.js中定義mutations對象，該對象中有兩個方法，mutations裏面的參數，第一個默認爲state，接下來的爲自定義參數。

咱們在mutations中定義兩個方法，增長和減小，而且設置一個參數n，默認值爲0，而後在Vuex.Store中使用它

/**
 * mutations 裏面放置的是咱們操做state對象屬性的方法
 */
const mutations = {
    mutationsAddCount(state, n = 0) {
        return (state.count += n)
    },
    mutationsReduceCount(state, n = 0) {
        return (state.count -= n)
    }
}
export default new Vuex.Store({
    state,
    mutations
})

而後咱們在helloWorld.vue中，使用這個方法

還記得咱們如何在組件中使用mutations嗎？就和自定義事件很是類似

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="handleAddClick(10)">增長</button>
      <button @click="handleReduceClick(10)">減小</button>
    </div>
  </div>
</template>

methods: {
    handleAddClick(n){
      this.$store.commit('mutationsAddCount',n);
    },
    handleReduceClick(n){
      this.$store.commit('mutationsReduceCount',n);
    }
  }

來瀏覽器看一下效果如何！

咱們能夠看到每當觸發事件時，咱們均可以在vue開發工具中看到咱們觸發的mutations方法，以及參數

完美！

 

接下來就是actions，actions是異步操做

建立actions對象，而且使用

這裏我在兩個方法中使用了兩個不一樣的參數，一個是context，它是一個和store對象具備相同對象屬性的參數。在第二個函數中，我是直接使用了這個對象的commit的方法。

憑你們喜愛就行

const actions = {
    actionsAddCount(context, n = 0) {
        console.log(context)
        return context.commit('mutationsAddCount', n)
    },
    actionsReduceCount({ commit }, n = 0) {
        return commit('mutationsReduceCount', n)
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions
})

在helloWorld.vue中

在methods中，增長兩個方法，使用dispath來觸發

 <div>異步操做</div>
  <div>
    <button @click="handleActionsAdd(10)">異步增長</button>
    <button @click="handleActionsReduce(10)">異步減小</button>
  </div>

handleActionsAdd(n){
      this.$store.dispatch('actionsAddCount',n)
    },
    handleActionsReduce(n){
      this.$store.dispatch('actionsReduceCount',n)
    }

進入瀏覽器看下效果如何！

最後就是getters

咱們通常使用getters來獲取咱們的state，由於它算是state的一個計算屬性

const getters = {
    getterCount(state, n = 0) {
        return (state.count += n)
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

<h4>{{count}}</h4>

const getters = {
    getterCount(state) {
        return (state.count += 10)
    }
}

getters算是很是簡單的了。

到這裏，若是全都看懂了，vuex你已經沒有壓力了。

可是vuex官方給了咱們一個更簡單的方式來使用vuex， 也就是 {mapState, mapMutations, mapActions, mapGetters}

只要咱們把上面基礎的搞懂，這些都不在話下，只是方面咱們書寫罷了。

就這麼簡單，這裏咱們用到了es6的擴展運算符。若是不熟悉的同窗仍是去看看阮一峯大神的《Es6標準入門》這本書，我是看完了，受益不淺！

<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    ...mapMutations({
      handleAddClick: 'mutationsAddCount',
      handleReduceClick: 'mutationsReduceCount'
    }),
    ...mapActions({
      handleActionsAdd: 'actionsAddCount',
      handleActionsReduce: 'actionsReduceCount'
    })
    // handleAddClick(n){
    //   this.$store.commit('mutationsAddCount',n);
    // },
    // handleReduceClick(n){
    //   this.$store.commit('mutationsReduceCount',n);
    // },
    // handleActionsAdd(n){
    //   this.$store.dispatch('actionsAddCount',n)
    // },
    // handleActionsReduce(n){
    //   this.$store.dispatch('actionsReduceCount',n)
    // }
  },
  computed: {
    count(){
      return this.$store.getters.getterCount
    }
  }
}
</script>

 

同理，getters和 state也可使用 mapState，mapGetters

 

若是你更懶的話，咱們可使用數組，而非對象，或者es6裏面的對象簡寫方式

就像這種

 

最後，若是你們發現有什麼問題，或者錯誤的地方，歡迎留言交流。