從交互到狀態變化的Vuex

需求

不管是vue仍是react,不管是rudex仍是vuex,都是服務於產品的需求。

需求：

• 點擊等操做來引起交互

• 交互致使數據發生變化

• 發生的變化反饋給用戶(顯示在頁面上等)

因此這不是一篇軟文，而是一篇操做文。你要具有必定的vue,vuex概念。

交互操做

這裏以頁面點擊爲示例。

//Index.vue

<template>
    ...
    <router-link to="/"  @click.native="jump" page-index="發現">
    </router-link>
    ...
</template>

<script>
...
methods:{
       jump(ev){
        this.$store.dispatch({
            type:'IBIM_CHANGE', //actions中的函數名
            index:ev.currentTarget.getAttribute('page-index') //附帶的參數
        })
}
...
</script>

這個vue組件的代碼應該比較簡單，就是綁定了一個事件。而後經過this.$store.dispatch來觸發action的操做

這裏描述瞭如何分發：http://vuex.vuejs.org/zh-cn/a...

Actions

Action 相似於 mutation，不一樣在於：

• Action 提交的是 mutation，而不是直接變動狀態。

• Action 能夠包含任意異步操做。

來自於組件中的dispatch根據type觸發對應的action中的函數(這裏是IBIM_CHANGE)

//actions.js

import * as types from './mutation-types'

export const IBIM_CHANGE = ({ commit }, playload) => {
    commit(types.IBIM_CHANGE, {
        index: playload.index
    })
}

觸發了這裏的IBIM_CHANGE函數，而且傳遞了一個commit和一個荷載playload。

因爲mutation必須是同步的，在Action咱們能夠作異步操做，爲獲取數據等行爲提供了可能。

Mutations

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。

//mutations.js

export const IBIM_CHANGE = (state, payload) => {
    state.where = payload.index
}

在action中咱們經過commit觸發了一個type爲IBIM_CHANGE的mutation，並在回調中更改狀態state。

這裏描述了mutations：http://vuex.vuejs.org/zh-cn/m...

組合

//index.js

//組裝module和根級別的模塊並導出 store
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        where: '發現'
    },
    actions,
    mutations
})

這裏用來導出頂級store，供全局使用。

我將狀態where掛載在全局上了(我的以爲它在項目組件中的位置不屬於任何一個module,是屬於全局的)

備註：我這裏沒有module

下面是點擊操做時候的狀態變化監控：

API

簡單描述一下能夠有哪些屬性

Vuex.Store({
    state: Object
    mutations:{ [type: string]: Function }
    actions: { [type: string]: Function }
    getters:{ [key: string]: Function }
    modules: Object
    plugins:Array<Function>,
    strict: Boolean
})

這裏是vuex的具體API：http://vuex.vuejs.org/zh-cn/a...