详解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 相关文章推荐
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
详解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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
python读取Android permission文件
2013/11/01 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python运算符重载详解及实例代码
2017/03/07 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
婴儿地球:Baby Earth
2018/12/25 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
擅自离岗检讨书
2014/02/11 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
贷款担保书范本
2015/09/22 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Oracle 区块链表创建过程详解
2021/05/15 Oracle
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
MySQL 计算连续登录天数
2022/05/11 MySQL