详解vuex状态管理模式


Posted in Javascript onNovember 01, 2018

一、前言

本次接受一个BI系统,要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化,这一个系统为了接入公司自身的产品,后端技术采用spring boot,前端采用vue+vuex+axios的项目架构方式,vuex作为vue的状态管理,是尤为重要的部分。这里,我将vuex如何运作和使用做一次总结,有错的地方,望多多提点。

二、vuex简单使用

安装vuex

cnpm install vuex --save

在src目录下建立文件夹,命名为store,建立index.js

如图所示:

详解vuex状态管理模式

在index.js中引入vue和vuex状态管理,并导出vuex,代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
   token: 0
  },
 })
 export default store;

在main.js中引入刚刚创建好的store并作为vue的store

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
 render: h => h(App)
 ,
 store
}).$mount('#app')

获得store里的token

在vue的组件中,想要获得vuex里的全局数据,可以把vue看做一个类,在其下面有许多属性,其中有我们刚刚注入的vuex,如图

详解vuex状态管理模式

我们可以看到vue他本身就是一个json,在其下有$store这个对象,而$store下又有state,state下得就是我们存储在vue中的全局数据,在组件中通过this.$store.state.token即可获得我们的数据。

三、vuex的核心概念之getters

有时候我们需要在获得的数据做一些简单的过滤或者处理的时候,getters就起到作用了。

代码如下

getters:{
    getToken(state){
     return state.token;
    }

同直接获取token的方式一样。getters也已经挂载到了$store下,故,我们可以通过this.$store.state.getters.getToken的方式,调用其函数。 但vuex为我们提供了mapGetters能够将其映射到对应的getters的方法上去,用法如下所示

import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 components: {
  HelloWorld
 },
 computed:{
  ...mapGetters(["getToken"])
 },
 mounted() {
   console.log(this.getToken)
  console.log(this.$store.getters.getToken)
 
 },
}

映射出来的getters仍然挂载在vue上,如图所示

详解vuex状态管理模式

四、vuex的核心概念之mutations与actions

我们可以吧mutations理解成一个事件函数,而actions就是触发器,通过actions,发起动作。

简单实例代码如下。

mutations:{
     setToken(state,n){
      state.token=state.token+n;
     }
    },
    actions:{
     setToken({commit},n){
      commit('setToken',n)
     }
    }

在组件中的使用,同getters的用法,代码如下

import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 components: {
  HelloWorld
 },
 computed:{
  ...mapGetters(["getToken"])
 },
 
 mounted() {

  console.log(this)
  console.log(this.setToken(1))
  console.log(this.getToken)
 
 },methods:{
    ...mapActions(["setToken"])
 },

在vue的json中,同样可以找到相同的属性。

详解vuex状态管理模式

五、vuex核心概念之mudules

vuex允许我们将store分为不同的模块,每个单独的模块具备getters,state,mutations,actions这四个store核心,

需要注意的是如果在模块内部加入了namesapced:true这一个属性。在取值的时候需要做一点细微的变动,通过mapGetters火mapActions映射时需要将模块名作为路劲,来获得该模块的getters,和actions,模块化代码如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
 namespaced:true,
 state: { a:1 },
 mutations: { },
 actions: { },
 getters: { geta(state){
  return state.a;
 } }
}

const moduleB = {
 namespaced:true,
 state: { b:1},
 mutations: { },
 actions: {}
}

const store = new Vuex.Store({ 
 
  state: {
   token: 0
  },
  getters:{
    getToken(state){
     return state.token;
    },
   
  } , mutations:{
   setToken(state,n){
     state.token=state.token+n;
   }
  },
  actions:{
   setToken({commit},n){
    commit('setToken',n)
   }
  },
  modules: {
   a: moduleA,
   b: moduleB
  },
 })
 export default store;

在组件中获得模块A的值得时候,我们来看一下geta这个getters属性,在vue中的状态,如图所示

详解vuex状态管理模式

geta为模块a下得getters属性,在获取的时候就需要这样

computed:{
  // ...mapGetters(["getToken"])
  ...mapGetters("a",["geta"])
 },
 
 mounted() {

  console.log(this)
  console.log(this.geta)

而如果模块没有命令空间的话,vuex会自动将模块内的getters,actions注入为全局的,直接按照原来个获取方式就可以了。

六、总结

这是我对vuex的基本用法和基本理解方式,vuex当然不可能局限于此,此处只列举了最简单的,做个总结的同时也等同于记下,据说vue3块出了,是用ts重写的vue,到时再去看看,vue3又有了哪些变化,和哪些可取之处。本文所写,有不对的地方,大家多多提出来。共同进步。

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

Javascript 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 #Javascript
Vue.js 事件修饰符的使用教程
Nov 01 #Javascript
微信小程序实现蒙版弹窗效果
Nov 01 #Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 #Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 #Javascript
微信小程序实现留言板
Oct 31 #Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python守护线程用法实例
2017/06/23 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
parser.add_argument中的action使用
2020/04/20 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
《木笛》教学反思
2014/03/01 职场文书
《画风》教学反思
2014/04/16 职场文书
预备党员综合考察材料
2014/05/31 职场文书
群教个人对照检查材料
2014/08/20 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
三好学生评语大全
2014/12/29 职场文书
归元寺导游词
2015/02/06 职场文书
开学第一周总结
2015/07/16 职场文书