简化vuex的状态管理方案的方法


Posted in Javascript onJune 02, 2018

在 vuejs 相关项目开发过程中,我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理。

简化vuex的状态管理方案的方法

事实上,在实际的使用中 vuex 可以说是相当繁琐的,每一次的需求增加需要增加 Mutations-Type Action Mutations , 为了简化这一操作,我们可以将 mutations 和 action 合并,简化流程如下:

简化vuex的状态管理方案的方法

在此种思想的引导下, muse-model 诞生了,以简单优雅的方式完成整个项目的状态管理。

什么是 muse-model

muse-model 并不是一个全新的状态管理工具, 它是基于 vuex 开发,可以说是 vuex 的一个辅助工具,在使用 muse-model 过程中,vuex 的一切 API 都是可以用的,这也方便了vuex 的用户进行过度。在初始化 muse-model 是也是需要传入 store 对象。

// model.js
import Vue from 'vue';
import Vuex from 'vuex';
import MuseModel from 'muse-model';

export const store = Vuex.Store({
 strict: true
});

export default new MuseModel(store);

使用

我们将以一个计数器的例子来演示 muse-model 的使用。

定义一个 model

model 由 namespace state action 三个部分组成

// count.js
export default {
  namespace: 'demo',
  state: {
    count: 1
  },
  add () {
    return {
      count: this.state.count + 1
    }
  },
  sub () {
    return {
      count: this.state.count - 1
    }
  }
}

不要再 action 中直接改变状态,而是通过 return 返回需要改变的新的状态.

连接组件

通过 connect 方法可以将 model 混入到组件的 computed 和 methods 中。

<template>
<div>
  <button@click="add">+</button>
  {{count}}
  <button@click="sub">-</button>
</div>
</template>
<script>
import model from './model';
import CountModel from './count';
const CountUI = {
  name: 'count-ui'
};

export default model.connect(CountUI, CountModel);
</script>

处理异步

关于异步处理只需要返回 promise 对象即可。

export default {
  //....
  addTimeOut () { // 异步处理
    return new Promise((resolve, reject) => {
     setTimeout(() => {
      resolve({
       count: this.state.count + 1
      });
     }, 1000);
    });
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
koa-router源码学习小结
Sep 07 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 Javascript
深入了解javascript 数组的sort方法
Jun 01 #Javascript
js 数组详细操作方法及解析合集
Jun 01 #Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 #Javascript
一个简单的node.js界面实现方法
Jun 01 #Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 #Javascript
Vue中的混入的使用(vue mixins)
Jun 01 #Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 #Javascript
You might like
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
js判断undefined类型示例代码
2014/02/10 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
python实现简单socket通信的方法
2016/04/19 Python
浅谈python写入大量文件的问题
2018/11/09 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
Java如何格式化日期
2012/08/07 面试题
小班幼儿评语大全
2014/04/30 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
安全教育片观后感
2015/06/17 职场文书
大学生入党自传2015
2015/06/26 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL