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 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
webpack实用小功能介绍
Jan 02 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
微信小程序实现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
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
深入了解Python数据类型之列表
2016/06/24 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
25道Java面试题集合
2013/05/21 面试题
党员承诺书范文
2014/05/19 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
领导干部失职检讨书
2015/05/05 职场文书
导游词之湖州-太湖
2019/10/11 职场文书