Vuex 单状态库与多模块状态库详解


Posted in Javascript onDecember 11, 2018

什么情况下使用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

Github Demo 

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

Github Demo

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

Javascript 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
js实现小时钟效果
Mar 25 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 #Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 #Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 #Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 #Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 #Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 #Javascript
You might like
杏林同学录(一)
2006/10/09 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
详解vue-cli 脚手架 安装
2019/04/16 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
django实现后台显示媒体文件
2020/04/07 Python
python中有帮助函数吗
2020/06/19 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
师德学习感言
2014/01/31 职场文书
公益广告语集锦
2014/03/13 职场文书
捐款活动总结
2014/08/27 职场文书
连锁超市项目计划书
2014/09/15 职场文书
辩论会主持词
2015/07/03 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书