详解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 CSS修改学习第二章 样式
Feb 19 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
JavaScript 参考教程
2006/12/29 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Python-split()函数实例用法讲解
2020/12/18 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
制定岗位职责的原则
2013/11/08 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
小学优秀教师材料
2014/12/15 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
春节晚会开场白
2015/05/29 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
python异常中else的实例用法
2021/06/15 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers