详解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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 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
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php实现记事本案例
2020/10/20 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python函数的万能参数传参详解
2019/07/26 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
生产主管岗位职责
2013/11/10 职场文书
领导证婚人证婚词
2014/01/13 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
使用javascript解析二维码的三种方式
2021/11/11 Javascript