详解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中的循环语句for语句深入理解
Apr 04 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
JS随机密码生成算法
Sep 23 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 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
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
手机促销活动方案
2014/02/05 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
工程质量保证书
2015/05/09 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫