Vuex新手的理解与使用详解


Posted in Javascript onMay 31, 2019

1 vuex的概念理解

提到vuex,就不能不先提vue.

我个人开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入改变时监听各种事件以改变页面逻辑数据.当然最早的时候,我们使用html内部的value来记载各种数据,但这种方式在今日看来就有些简单粗暴了,难以使用复杂的页面逻辑.这也正是我开始使用vue的初衷--数据双向绑定.

但对于vue而言,还有一项很强大的功能,就是组件功能.对于这项功能,有两种使用理解:其一是制作一些简单轻便的轮子,很难适用于其他项目但很适用于项目内部的多个页面;其二是路由页面,理解起来就是将每个页面看做是一个组件,而不是一个单独的html页面;

再开始使用vue的时候,我在每个页面都会new一个新的vue来实现页面内部的数据双向绑定,这种用法本来无可厚非,也能兼容老项目,但仅有一点不足(或者说是老项目的通用不足之处),即逻辑数据的管理是以html页面为单位的,页面之间的数据没有什么可关联的太好方法(html页面之间是通过iframe实现连接的,但相互之间的数据交流却没有太好的api,且也容易出现兼容性问题).

vuex就是为此准备的,当然有一个前提,就是页面关联方式,要通过vue组件的方式关联起来.使用此种方式后,在使用前台vue进行编程的一些思想,就要发生一些转变.这里列举一下我们可通过数据交流所做的一些事情:

大多数经常调用的基础数据,可在所有页面公用,这是适用于技术场合的;

对于组件,常用的有两种属性,一是data,一是prop.就我的理解而言,data负责组件内部的逻辑,prop负责与内外部数据之间的数据关联,如最常见的value.但对于路由页面组成的框架而言(如iview),如果切换路由页面,会导致原路由页面data清空,此时使用vuex.store来存储数据就可避免这种情况,这是适用于vue组件页面场合的;

2 vuex的使用

对于一个前台项目而言,vue组件一定有很多,但vuex只能有一个('/src/store/index.js').当然,可以通过import的方式将vuex开枝散叶(modules),使得不同的module存储不同的业务数据.以下为vuex的主干内容:

import Vue from 'vue'
import Vuex from 'vuex'

import user from './module/user'
import app from './module/app'
import basedata from './module/basedata'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
  //
 },
 mutations: {
  //
 },
 actions: {
  //
 },
 modules: {
  user,
  app,
  basedata
 }
})

以下为其中的一个枝叶:/module/basedata.js,用来存储基础数据的module:

import { getCusData, getSupSelect } from '../../api/public'

/**
 * 常用基础数据读取,注意有以下限制:
 * 1.必须只能是读取!!!
 * 2.必须只能是在基础模块的数据!!!
 * 3.目前仅是通过数据的有无来判断是否作为缓存,后续可能会通过更加合理和复杂的逻辑来判断.
 * @author YangYishe
 */
export default {
 state: {
  // 客户集合
  arrCustomer: [],
  // 供应商集合
  arrSupplier: [],
  
  nowTimes: 0
 },
 mutations: {
  setNowTimes (state, times) {
   // 测试vuex state的方法
   console.log('set now times')
   state.nowTimes = new Date().getTime() + times
  },
  // 重置客户数据
  setCustomerData (state, arrCustomer) {
   state.arrCustomer = arrCustomer
  },
  // 重置供应商数据
  setSupplierData (state, arrSupplier) {
   state.arrSupplier = arrSupplier
  },
  
 },
 getters: {

 },
 actions: {
  // 测试改变方法
  handleChangeTimes ({ state, commit }, { times }) {
   commit('setNowTimes', times)
  },
  // 读取客户数据(支持mapState和return两种用法)
  loadCustomer ({ state, commit }) {
   // 读取客户数据(Promise以支持异步操作)
   if (state.arrCustomer.length === 0) {
    return new Promise((resolve, reject) => {
     getCusData().then(res => {
      commit('setCustomerData', res.data)
      resolve(res.data)
     }).catch(err => reject(err))
    })
   } else {
    return state.arrCustomer
   }
  },
  // 读取供应商数据(支持mapState和return两种用法)
  loadSupplier ({ state, commit }) {
   if (state.arrSupplier.length === 0) {
    return new Promise((resolve, reject) => {
     getSupSelect().then(res => {
      commit('setSupplierData', res.data)
      resolve(res.data)
     }).catch(err => reject(err))
    })
   } else {
    return state.arrSupplier
   }
  },
  
 }
}

从这个module/basedata.js中,我们很容易看出这个module的大致逻辑.

  • state存储的全局的客户和供应商集合;
  • mutations一般是用来同步改变state中的数据,类似于setters;
  • getters用来根据state计算各种属性值;
  • actions则是异步接收数据(不一定必须是异步方法,如第一个方法,只是外界调用接口都是从这里调用的),然后调用mutations内部方法来改变state的值;

外界调用方式,可参考如下(这里仅列举必要代码):

<template>
  ...
  <!-- 这里采用的是iview框架,所以Select和Option都是首字母大写 -->
  <Select v-model="mCondition.customerId" clearable filterable>
   <Option v-for="mCustomer in arrCustomer" :key="mCustomer.id" :value="mCustomer.id">{{mCustomer.name}}</Option>
  </Select>
  ...
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default{
  name:'test-temp',
  data(){
    return {
      //
      mCondition:{}
    }
  },
  computed:{
    //这里因为是采用vuex.store的分支,不确定采用字符串数组的方式是否可以
    ...mapState({
      arrCustomer:state=>state.basedata.arrCustomer
    })
    
  },
  created(){
    //这里调用的就是mapActions的方法,如果原方法有参数,则默认从第二个参数开始,不需考虑{state}
    this.loadCustomer();
  },
  methods:{
    //这里采用的是字符串数组的方式
    ...mapActions([
     'loadCustomer',
    ]),
  }
  
}

</script>

以上即是vuex的使用方式,个人认为比较中的说明,已经放在代码中的注释里了.

3 其他注意点

本文更偏向于让新手去理解和上手,故代码偏向于更简单的方案.

实际使用中,对于缓存更替的考虑可能要更复杂.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
前端jquery部分很精彩
May 03 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
Node.js Domain 模块实例详解
Mar 18 Javascript
一文快速了解JQuery中的AJAX
May 31 #jQuery
gulp构建小程序的方法步骤
May 31 #Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 #jQuery
自定义javascript验证框架示例【附源码下载】
May 31 #Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 #Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 #Javascript
一文了解vue-router之hash模式和history模式
May 31 #Javascript
You might like
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
超级退弹代码
2008/07/07 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
求职信范文英文版
2014/01/05 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
成人继续教育实施方案
2014/03/01 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
交通事故协议书
2014/04/15 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python