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 相关文章推荐
js使用eval解析json(js中使用json)
Jan 17 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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面向对象分析设计的经验原则
2008/09/20 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
python获取外网ip地址的方法总结
2015/07/02 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
python下载的库包存放路径
2020/07/27 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
考试不及格的检讨书
2014/01/22 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
党员三严三实心得体会
2014/10/13 职场文书
教师师德师风整改措施
2014/10/24 职场文书
审美与表现自我评价
2015/03/09 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle
GPU服务器的多用户配置方法
2022/07/07 Servers
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技