简述vue状态管理模式之vuex(2)

import * as types from './mutation-type.js'; export default { [types.SET_NAME](state, name) { state.name = name; }, [types.SET_AGE](state, age) { state.age = age; } };

actions示例

异步操作、多个 commit 时

import * as types from './mutation-type.js'; export default { nameAsyn({commit}, {age, name}) { commit(types.SET_NAME, name); commit(types.SET_AGE, age); } }

modules–m1.js示例

如果不是很复杂的应用，一般来讲是不会分模块的

export default { state: {}, getters: {}, mutations: {}, actions: {} }

index.js示例（组装vuex)

import vue from 'vue'; import vuex from 'vuex'; import state from './state.js'; import * as getters from './getters.js'; import mutations from './mutations.js'; import actions from './actions.js'; import m1 from './modules/m1.js'; import m2 from './modules/m2.js'; import createLogger from 'vuex/dist/logger'; // 修改日志 vue.use(vuex); const debug = process.env.NODE_ENV !== 'production'; // 开发环境中为true，否则为false export default new vuex.Store({ state, getters, mutations, actions, modules: { m1, m2 }, plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改 });

最后将 store 实例挂载到 main.js 里面的 vue 上去就行了

import store from './store/index.js'; new Vue({ el: '#app', store, render: h => h(App) });

在 vue 组件中使用时，我们通常会使用 mapGetters 、 mapActions 、 mapMutations ，然后就可以按照 vue 调用 methods 和 computed 的方式去调用这些变量或函数，示例如

import {mapGetters, mapMutations, mapActions} from 'vuex'; /* 只写组件中的script部分 */ export default { computed: { ...mapGetters([ name, age ]) }, methods: { ...mapMutations({ setName: 'SET_NAME', setAge: 'SET_AGE' }), ...mapActions([ nameAsyn ]) } };

二、modules

在 src 目录下 , 新建一个 store 文件夹 , 然后在里面新建一个 index.js

import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); export default new vuex.Store({ state:{ show:false } })

在 main.js 里的代码应该改成,在实例化 Vue 对象时加入 store 对象

//vuex import store from './store' new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App } })

这样就把 store 分离出去了 , 那么还有一个问题是 : 这里 $store.state.show 无论哪个组件都可以使用 , 那组件多了之后 , 状态也多了 , 这么多状态都堆在 store 文件夹下的 index.js 不好维护怎么办 ?

我们可以使用 vuex 的 modules , 把 store 文件夹下的 index.js 改成

import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); import dialog_store from '../components/dialog_store.js';//引入某个store对象 export default new vuex.Store({ modules: { dialog: dialog_store } })

这里我们引用了一个 dialog_store.js , 在这个 js 文件里我们就可以单独写 dialog 组件的状态了

export default { state:{ show:false } }

做出这样的修改之后 , 我们将之前我们使用的 $store.state.show 统统改为 $store.state.dialog.show 即可

如果还有其他的组件需要使用 vuex , 就新建一个对应的状态文件 , 然后将他们加入 store 文件夹下的 index.js 文件中的 modules 中

modules: { dialog: dialog_store, other: other,//其他组件 }

三、mutations

对 vuex 的依赖仅仅只有一个 $store.state.dialog.show 一个状态 , 但是如果我们要进行一个操作 , 需要依赖很多很多个状态 , 那管理起来又麻烦了

mutations 里的操作必须是同步的

export default { state:{//state show:false }, mutations:{ switch_dialog(state){//这里的state对应着上面这个state state.show = state.show?false:true; //你还可以在这里执行其他的操作改变state } } }

使用 mutations 后 , 原先我们的父组件可以改为

<template> <div> <a href="javascript:;" @click="$store.commit('switch_dialog')">点击</a> <t-dialog></t-dialog> </div> </template> <script> import dialog from './components/dialog.vue' export default { components:{ "t-dialog":dialog } } </script>

使用 $store.commit('switch_dialog') 来触发 mutations 中的 switch_dialog 方法

四、actions

多个 state 的操作 , 使用 mutations 会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了