简化vuex的状态管理方案的方法
在 vuejs 相关项目开发过程中，我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理。
事实上，在实际的使用中 vuex 可以说是相当繁琐的，每一次的需求增加需要增加 Mutations-Type 、 Action 和 Mutations , 为了简化这一操作，我们可以将 mutations 和 action 合并，简化流程如下：
在此种思想的引导下, 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);
});
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解vue组件化开发-vuex状态管理库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.
-
浅谈Vuex的状态管理(全家桶)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.
-
vue的状态管理模式vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 备注:本文的示例等代码将会采用es6的语法. 链接 vuex官方中文网站 使用vue和vuex实现的简易商城,仅供参考 vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理 一听就很高大上,蛮吓人的.在我看来 vuex 就是把需
-
一篇看懂vuejs的状态管理神器 vuex状态管理模式
关于vuex类的新闻最近很多,看到眼热就去查了下资料,然后扯出来一堆flux.redux.state.state之类的概念,以及大型工程必要性之类的.看官方手册也是昏昏然. 然而,我还是弄懂了!我准备从demo出发,以同样的一个最简单的demo,演示两种情况下的代码编写情况: 单纯依赖于vue.js 依赖vue.js,也使用了vuex技术 目的是通过对比引出vuex的概念.优势和劣势.也许这是目前最接地气的vuex的介绍吧:).所以无论如何在了解vuex之前,你必须懂得vue.js(好像废话:)
-
Vuex模块化实现待办事项的状态管理
前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B.当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的.vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯. 项目介绍 待办事项中的一个事件,它可能拥有几个状态,未完成.已完成.已取消或被删除等.这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常
-
Vue的Flux框架之Vuex状态管理器
学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 React 里面的 Redux 的状态管理器,用来管理Vue的所有组件状态. 为什么使用Vuex? 当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态. 遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理
-
详解Vue中状态管理Vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state
-
Vue 2.X的状态管理vuex记录详解
记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method ---> Actions ---> Mutions ---> State (作用于vue) 在Vue2.X中使用vuex的情况: 1.多个视图依赖于同一状态, 比如验证登陆情况. 2.来自不同视图的行为需要变更同一状态 , 3.不在一个组件树(不是父子组件的关系),组件间频繁的进行数据和
-
简化vuex的状态管理方案的方法
在 vuejs 相关项目开发过程中,我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理. 事实上,在实际的使用中 vuex 可以说是相当繁琐的,每一次的需求增加需要增加 Mutations-Type . Action 和 Mutations , 为了简化这一操作,我们可以将 mutations 和 action 合并,简化流程如下: 在此种思想的引导下, muse-model 诞生了,以简单优雅的方式完成整个项目的状态管理. 什么是 muse-model mus
-
vue之使用vuex进行状态管理详解
目录 vuex进行状态管理 vuex状态管理基本使用 vuex进行状态管理 首先学习vuex必须先知道vue原理 Vue是一个典型的MVVM框架,模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新.这种设计让状态管理变得非常简单而直观 Vue实现这种数据双向绑定的效果,需要三大模块: Observer:能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者 Compile:对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更
-
浅谈vuex 闲置状态重置方案
前言 大型单页应用(后面都是指spa),我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题.这种应用少则几十个单页,多则上百个单页.随着路由的频繁切换,每个路由对应的 vuex 中的状态将越来越多.为了做到页面的极致优化,我们需要将那些闲置的状态重置,以减小占用的内存空间. 什么状态可以重置 vuex 强调采用集中式存储管理应用的所有组件的状态,但是我们真把所有的状态都放到 store 中去处理,你会发现开发起来非常痛苦.这里如果想很好的把控哪些数据需要放到 store
-
说说如何使用Vuex进行状态管理(小结)
1 为什么需要状态管理 一个 Vue 组件分为数据(model)与视图(view).当通过 methods 中的方法更新数据时,视图也会自动更新. message.vue <template> <div> {{message}} <button @click="changeMessage">改变内容</button> </div> </template> <script> export default
-
Vuex中状态管理器的使用详解
目录 一.Vuex是什么? 二.什么时候使用Vuex 三.Vuex的核心概念和API 四.应用举例 五.vuex中各种辅助函数的用法,可以使我们更加方便的运用vuex 一.Vuex是什么? Vuex在Vue项目开发时使用的状态管理工具.简单来说,就是对Vue的应用中多个组件的共享状态进行集中式的管理(读/写) Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取Sta
-
vuex(vue状态管理)的特殊应用案例分享
有需求才会有应用! 需求:vue项目中,我需要一个类似全局的变量保存一个tag的值,在不同层级下的子组件中,对这个变量进行修改,并且使变化的结果作用在组件页面上. 这里使用vuex解决问题,代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const state = { spinTag: false, //spin组件标记 }; //改变状态的方法 const mutations = { spinTagTAG(s
-
Vue状态管理之使用Pinia代替Vuex
目录 1.Pinia是什么 2.Pinia简单上手 3.使用体验 1.Pinia是什么 Pinia是一个vue的状态管理方案,是vuex团队成员开发,实现了很多vuex5的提案,更加地轻量化且有devtools的支持 vuex4一直被人诟病对于typescript的支持不良好,vuex5也迟迟未来 所以有了pinia的出现 相较于vuex: pinia无需创建复杂的包装器来支持typescript,对于typescript类型判断是天然支持的,享受ide带来的自动补全,减少开发的心智负担,减少v
-
vuex项目中登录状态管理的实践过程
目录 工具: 登录场景: 实践: 场景1思考与实践 场景2思考与实践 总结 工具: chorme浏览器安装Vue.js devtools方便调试 登录场景: 页面的导航处或其他地方有时会显示用户现在的登录状态,状态可分为:未登录,正在登录(loading),登录成功并显示用户名. 有些页面是不需要登录就可以让用户浏览的,但是有些页面必须登录才可以进入浏览. 实践: 场景1思考与实践 用vuex创建一个数据仓库 //src目录下新建一个store目录,创建index.js如下 //创建数据仓库 i