Vuex 单状态库与多模块状态库详解
什么情况下使用vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
之前在做旅游页的时候对 Vuex 进行了简单的了解。近期在做 Vue 项目的同时重新学习了 Vuex 。本篇博文主要总结一下 Vuex 单状态库和多模块 modules 的两类使用场景。
本篇所有代码是基于 Vue-Cli 3.x 版本的脚手架工具进行编写的。
vuex 单状态库 Demo
这是一个仅有单个 Vuex store 状态库的 Demo。当项目中使用一个 Vuex 状态库就已经足够的时候，可以使用这种方式。
本 Demo 使用了一个 increment 与 decrement 的 增 / 减 事件来体现 store 数据的变化。
store.js
由于状态库是单一的，仅有一个 store.js 文件管理状态库。在该文件中一开始进行 import 的引入，然后使用 Vue.use(Vuex) 使用 Vuex，之后分别定义 state、mutations 和 actions，并通过 export default new Vuex.Store({state, mutations, actions}) 模块化。
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 1
}
const mutations = {
increment(state) {
state.count ++
},
decrement(state) {
state.count --
}
}
const actions = {
increment:({commit}) => {
commit('increment')
},
decrement:({commit}) => {
commit('decrement')
}
}
export default new Vuex.Store({state, mutations, actions})
main.js
在入口文件 main.js 中通过 import 引入 store，并注册到 Vue 的实例上。
import Vue from 'vue'
import App from './App.vue'
import store from './store'
// Vue-Cli 3.x
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
// Vue-Cli 2.x
// new Vue({
// el: '#app',
// router,
// store,
// components: { App },
// template: '<App/>'
// })
使用 $store
在相应的组件中如下引入并在 methods 中使用 mapActions。
<template>
<div class="vuex">
Vuex 全局 Store count {{$store.state.count}}
<button type="button" name="button" @click="increment">加</button>
<button type="button" name="button" @click="decrement">减</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: mapActions([
'increment',
'decrement'
])
}
</script>
<style scoped>
</style>
Demo
关于单状态库的 Demo 请参考此 github
vuex 多模块状态库 Demo
当项目变得非常庞大，单个 store 无法满足需求的时候，可以通过多模块状态库管理多个 store，将各类状态分类进行维护。
本 Demo 使用了 add 与 reduce 的 增 / 减 事件来体现 store 数据的变化。
store
由于需要管理多个 store，因此在项目目录中创建 store 文件夹，并创建 modules 文件夹用来放置各个 store文件，并使用 index.js 作为入口文件。具体结构请查看 Demo。
main.js
同样在 main.js 中通过 import 引入 store，但这里是引入 index.js 这个入口文件。
import Vue from 'vue' import App from './App.vue' import store from './store/index'
使用 $store
除了使用方式有一定不同之外，methods 中的 mapActions 也更换了书写方式，第一个参数是对应 store 管理的数据，第二个参数是关于操作事件的数组。
<template lang="html">
<div class="a">
page a {{$store.state.countA.countA}}
<button type="button" name="button" @click="add">增加</button>
<button type="button" name="button" @click="reduce">删减</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: mapActions('countA',['add','reduce'])
}
</script>
<style lang="css">
</style>
Demo
关于多模块状态库的 Demo 请参考此 github
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
一篇看懂vuejs的状态管理神器 vuex状态管理模式
关于vuex类的新闻最近很多,看到眼热就去查了下资料,然后扯出来一堆flux.redux.state.state之类的概念,以及大型工程必要性之类的.看官方手册也是昏昏然. 然而,我还是弄懂了!我准备从demo出发,以同样的一个最简单的demo,演示两种情况下的代码编写情况: 单纯依赖于vue.js 依赖vue.js,也使用了vuex技术 目的是通过对比引出vuex的概念.优势和劣势.也许这是目前最接地气的vuex的介绍吧:).所以无论如何在了解vuex之前,你必须懂得vue.js(好像废话:)
-
详解Vuex管理登录状态
又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑. 1.据说储存的vuex store里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态user还是应该要写入sessionStorage,不然登录了的
-
简述vue状态管理模式之vuex
了解vuex核心概念请移步 https://vuex.vuejs.org/zh/ 一.初始vuex 1.1 vuex是什么 那么先来看看这两个问题: 什么是vuex?官网说:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 按个人通俗理解来说就是:vuex就是用来管理各个组件之间的一些状态,可以理解为这些状态就是公共(共享)部分.此时任何组件都能从中获取状态或者触发一些行为事件. 什么情况下用到vuex?官网说:如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的.确实
-
Vue 2.X的状态管理vuex记录详解
记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method ---> Actions ---> Mutions ---> State (作用于vue) 在Vue2.X中使用vuex的情况: 1.多个视图依赖于同一状态, 比如验证登陆情况. 2.来自不同视图的行为需要变更同一状态 , 3.不在一个组件树(不是父子组件的关系),组件间频繁的进行数据和
-
浅谈Vuex的状态管理(全家桶)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.
-
详解vue组件化开发-vuex状态管理库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.
-
详解vuex状态管理模式
一.前言 本次接受一个BI系统,要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化,这一个系统为了接入公司自身的产品,后端技术采用spring boot,前端采用vue+vuex+axios的项目架构方式,vuex作为vue的状态管理,是尤为重要的部分.这里,我将vuex如何运作和使用做一次总结,有错的地方,望多多提点. 二.vuex简单使用 安装vuex cnpm install vuex --save 在src目录下建立文件夹,命名为store,建立index.js 如图
-
简化vuex的状态管理方案的方法
在 vuejs 相关项目开发过程中,我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理. 事实上,在实际的使用中 vuex 可以说是相当繁琐的,每一次的需求增加需要增加 Mutations-Type . Action 和 Mutations , 为了简化这一操作,我们可以将 mutations 和 action 合并,简化流程如下: 在此种思想的引导下, muse-model 诞生了,以简单优雅的方式完成整个项目的状态管理. 什么是 muse-model mus
-
vue的状态管理模式vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 备注:本文的示例等代码将会采用es6的语法. 链接 vuex官方中文网站 使用vue和vuex实现的简易商城,仅供参考 vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理 一听就很高大上,蛮吓人的.在我看来 vuex 就是把需
-
Python标准库datetime之datetime模块用法分析详解
目录 1.日期时间对象 2.创建日期时间对象 2.1.通过datetime.datetime.utcnow()创建 2.2.通过datetime.datetime.today()函数创建 2.3.通过datetime.datetime.now()创建 2.4.通过datetime.datetime()创建 2.5.查看创建的对象 2.6.查看datetime可以处理的最大的日期时间对象及最小的日期时间对象 3.日期事件对象的属性 4.日期时间对象转换为时间元组 5.将日期时间对象转化为公元历开始
-
Python Asyncio库之asyncio.task常用函数详解
目录 前记 0.基础 1.休眠--asyncio.sleep 2.屏蔽取消--asyncio.shield 3.超时--asyncio.wait_for 4.简单的等待--wait 5.迭代可等待对象的完成--asyncio.as_completed 前记 Asyncio在经过一段时间的发展以及获取Curio等第三方库的经验来提供更多的功能,目前高级功能也基本完善,但是相对于其他语言,Python的Asyncio高级功能还是不够的,但好在Asyncio的低级API也比较完善,开发者可以通过参考A
-
对Python Pexpect 模块的使用说明详解
背景介绍 Expect 程序主要用于人机对话的模拟,就是那种系统提问,人来回答 yes/no ,或者账号登录输入用户名和密码等等的情况.因为这种情况特别多而且繁琐,所以很多语言都有各种自己的实现.最初的第一个 Expect 是由 TCL 语言实现的,所以后来的 Expect 都大致参考了最初的用法和流程,整体来说大致的流程包括: 运行程序 程序要求人的判断和输入 Expect 通过关键字匹配 根据关键字向程序发送符合的字符串 TCL 语言实现的 Expect 功能非常强大,我曾经用它实现了防火墙
-
python urllib.request模块的使用详解
python的urllib模块提供了一系列操作url的功能,可以让我们通过url打开任意资源.其中比较常用的就是request模块,本篇主要介绍requset模块. urllib子模块 urllib.request 打开或请求url urllib.error 捕获处理请求时产生的异常 urllib.parse 解析url urllib.robotparser 用于解析robots.txt文件 robots.txt是一种存放于网站根目录下文本文件,用来告诉网络爬虫服务器上的那些文件可以被查看.又被
-
C++使用easyX库实现三星环绕效果流程详解
目录 1,项目描述 2,解决思路 3,关键代码 4,项目运行截图 5,具体代码实现 1,项目描述 功能1:使用图形化的方式描述地球围绕着太阳转动,月球围绕着地球转动 功能2:在转动的过程中当用户按下1,2,3,4,5,6,7时它可以变换出7种不同的颜色,当用户按下8时它可以变换从1-7的颜色依次变换当用户再次按下8键时停止变换颜色 功能3:当用户按下上键时,地球会围绕太阳反转,当再次按下上键时地球会恢复到正转 功能4:当用户按下空格键的时候,所有动画暂停,当再次按下空格键的时候所有动画继续进行.
-
React 模块联邦多模块项目实战详解
目录 前提: 1. 修改webpack增加ModuleFederationPlugin 2.本地开发测试 3.根据路由变化自动加载对应的服务入口 4.线上部署 5.问题记录 前提: 老项目是一个多模块的前端项目,有一个框架层级的前端服务A,用来渲染界面的大概样子,其余各个功能模块前端定义自己的路由信息与组件.本地开发时,通过依赖框架服务A来启动项目,在线上部署时会有一个总前端的应用,在整合的时候,通过在获取路由信息时批量加载各个功能模块的路由信息,来达到服务整合的效果. // config.js
-
Python 中的 Counter 模块及使用详解(搞定重复计数)
文章目录 参考描述Counter 模块Counter() 类Counter() 对象字典有序性KeyError魔术方法 \_\_missing\_\_ update() 方法 Counter 对象的常用方法most_common()elements()total()subtract() Counter 对象间的运算加法运算减法运算并集运算交集运算单目运算 Counter 对象间的比较>== 参考 项目 描述 Python 标准库 DougHellmann 著 / 刘炽 等 译 搜索引擎 Bing
-
Python Asyncio 库之同步原语常用函数详解
目录 前记 0.基础 1.Lock 2.Event 4.Condition 5.Semaphore 前记 Asyncio的同步原语可以简化我们编写资源竞争的代码和规避资源竞争导致的Bug的出现. 但是由于协程的特性,在大部分业务代码中并不需要去考虑资源竞争的出现,导致Asyncio同步原语被使用的频率比较低,但是如果想基于Asyncio编写框架则需要学习同步原语的使用. 0.基础 同步原语都是适用于某些条件下对某个资源的争夺,在代码中大部分的资源都是属于一个代码块,而Python对于代码块的管理
-
Python中Selenium模块的使用详解
Selenium的介绍.配置和调用 Selenium(浏览器自动化测试框架) 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Firefox,Safari,Google Chrome,Opera等.这个工具的主要功能包括:测试浏览器的兼容性--测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上.测试系统功能--创建回归测试检验软件功能和用户需求.支持自动录制动作和自动生成 .
-
ASP.NET Core扩展库之日志功能的使用详解
上一篇我们对Xfrogcn.AspNetCore.Extensions扩展库功能进行了简单的介绍,从这一篇文章开始,我将逐步介绍扩展库中的核心功能. 日志作为非业务的通用领域基础功能,有非常多的技术实现,这些第三方库避免了我们花费时间去重复实现,不过,很多日志库配置复杂,不易于使用,入手较难,而有些库可能与ASP.NET Core的结合并不好. 如果我们没有对所使用的日志库进行详细了解,日志库也可能产生严重的问题,在我的开发生涯中,曾经遇到过多次因为日志库而导致的生产事故.