详解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 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
js 调用百度分享功能
Feb 27 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python中requests库session对象的妙用详解
2017/10/30 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
大学生自我评价怎样写好
2013/10/23 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
国培远程培训感言
2014/03/08 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python