需求

无论是vue还是react,无论是rudex还是vuex,都是服务于产品的需求。

需求：

• 点击等操作来引发交互

• 交互导致数据发生变化

• 发生的变化反馈给用户(显示在页面上等)

所以这不是一篇软文，而是一篇操作文。你要具备一定的vue,vuex概念。

交互操作

这里以页面点击为示例。

//Index.vue
    

这个vue组件的代码应该比较简单，就是绑定了一个事件。然后通过this.$store.dispatch来触发action的操作

这里描述了如何分发：

Actions

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。

• Action 可以包含任意异步操作。

来自于组件中的dispatch根据type触发对应的action中的函数(这里是IBIM_CHANGE)

//actions.jsimport * 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.jsexport const IBIM_CHANGE = (state, payload) => {    state.where = payload.index}

在action中我们通过commit触发了一个type为IBIM_CHANGE的mutation，并在回调中更改状态state。

这里描述了mutations：

组合

//index.js//组装module和根级别的模块并导出 storeimport 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
    
     ,    strict: Boolean})
    

这里是vuex的具体API：