VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • Vuex新手的理解与使用详解

    建站教程 2019年11月09日 关键词:,,,

    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 其他注意点

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

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • Vuex 快速入门(简单易懂)
    • Vuex入门到上手教程
    • 简单的三步vuex入门
    • Vuex 入门教程
    • 分分钟学会vue中vuex的应用(入门教程)
    • Vuex简单入门
    • Vue.js实战之Vuex的入门教程

    广而告之:
    热门推荐:
    基于es6三点运算符的使用方法(实例讲解)

    先看一个es6规范下三点运算符的使用实例: let fun=function(a,...list){ console.log(a,list); }; fun('0','a','b','c');//0 [a,b,c] 以上可以看到我们现在在定义函数对象时可以动态设置参数的个数了:第一个参数a是普通参数(忽略), 大家可以看到第二个参数list前面有三个点···

    Laravel框架实现的记录SQL日志功能示例

    本文实例讲述了Laravel框架实现的记录SQL日志功能。分享给大家供大家参考,具体如下: 在项目开发过程中或者是性能优化中,经常会有要查看执行sql的情况,然而Laravel日志默认不记录执行sql。好在留有相关接口,我们可以很方便的就是想SQl日志功能。 在 App\Providers\EventSer···

    PHPstorm快捷键(分享)

    如下所示: Eclipse快捷键 Ctrl+1 快速修复 Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt+↓ 当前行和下面一行交互位置 Alt+↑ 当前行和上面一行交互位置 Alt+← 前一个编辑的页面 Alt+→ 下一个编辑的页面(当然是···

    js实现城市级联菜单的2种方法

    本文实例为大家分享了js实现城市级联菜单的具体代码,供大家参考,具体内容如下 方法一:用switch方法判断。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javasc···

    php5 apache 2.2 webservice 创建与配置(java)

    php 5 apache 2.2 webservice 创建与配置 测试工具:wsCaller.jar (此文是给java程序调用的webservice) 提示:要运行wsCaller.jar 要选安装jdk 如果没有安装jdk 则wsCaller.jar 会以压缩包的形式显示 1 写webservice 要用到的接口 复制代码 代码如下: <?php class ser···

    实例分析基于PHP微信网页获取用户信息

    很多用户在开发微信版网页的时候,需要获取用户的基本信息,比如国家,省,市,昵称等,我们接下来基于PHP语言基础详细分析一下如何成功获取。 必要条件: 1)公众号认证 2)有网页授权获取用户基本信息的权限接口 注意:最近有朋友说:在公众平台申请的测试号,会出现无法取到···

    Angular实现下拉框模糊查询功能示例

    本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了。 1. 普通方···

    php实现常用文件上传类的示例

    废话不多说,直接上代码: <?php /** * 上传文件类 * @param _path : 服务器文件存放路径 * @param _allowType : 允许上传的文件类型和所对应的MIME * @param _file : 上传的文件信息 */ class Upload{ private $_path; private $_allowType; private $_file···

    网站设计效果体验 之七种不同的色系

    网站建设中的色彩搭配是大有讲究的,它可以在无形中为一个网站添加各种信息,包括网站主题、情感、氛围的表达等, 网站设计色彩的搭配牵动着用户的体验,不同行业对网站色调的选择都是有一定的要求,甚至带给用户的效果体验是不一样的。 大地色系的网站设计 大地色属于贴近自···

    用PHP动态生成虚拟现实VRML网页

    多年前本人开始从事三维动画方面的学习,后学习了PHP,发现可以通过PHP动态生成VRML文档,有点类似于Generator动态生成Flash的方式。 由于VRML博大精深,这里只介绍一个简单的例子,还可以将各种VRML结点存入数据库中,这样的虚拟现实网页将……,爽! 下面是源程序。注意···