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的固定表头和列头的代码
May 03 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
用console.table()调试javascript
Sep 04 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
javascript学习之json入门
Dec 22 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
js实现放大镜特效
May 18 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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+DBM的同学录程序(2)
2006/10/09 PHP
PHP新手入门学习方法
2011/05/08 PHP
PHP实现倒计时功能
2020/11/16 PHP
ext实现完整的登录代码
2008/08/08 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python常用库大全及简要说明
2020/01/17 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
心理学专业毕业生推荐信范文
2013/11/21 职场文书
如何写早恋检讨书
2014/09/10 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
学校体育节班级口号
2015/12/25 职场文书