详解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 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
JavaScript的一些小技巧分享
Jan 06 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
一个显示天气预报的程序
2006/10/09 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
php微信开发之关注事件
2018/06/14 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
python实现解数独程序代码
2017/04/12 Python
python中的句柄操作的方法示例
2019/06/20 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python3 re返回形式总结
2020/11/20 Python
python 图像增强算法实现详解
2021/01/24 Python
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
医校毕业生自我鉴定
2014/01/25 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
煤矿安全生产标语
2014/06/06 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
白鹤梁导游词
2015/02/06 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL