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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
详解Python在七牛云平台的应用(一)
2017/12/05 Python
TensorFlow实现模型评估
2018/09/07 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
实例代码讲解Python 线程池
2020/08/24 Python
Django websocket原理及功能实现代码
2020/11/14 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
关于环保的建议书
2014/05/12 职场文书
第一军规观后感
2015/06/12 职场文书
小学大队长竞选稿
2015/11/20 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Python面向对象编程之类的概念
2021/11/01 Python