欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vuex新手的理解与使用详解

程序员文章站 2022-06-25 11:22:58
1 vuex的概念理解 提到vuex,就不能不先提vue. 我个人开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我...

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

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

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

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