小猿圈web前端教程之详解零基础学习VUEX理解和使用

绝地灬酷狼 2022-10-01 10:59 176阅读 0赞

朋友你认真看过你使用的手机页面吗？知道他们是怎么来的吗？他们是前端工程师一行行代码敲出来的，今天小猿圈web前端讲师给大家分享一篇关于零基础学习VUEX的理解和使用详解，希望对同学们学习有所帮助，下面我们一起来看一下吧。

1、vuex的概念理解

提到vuex,就不能不先提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的值;

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

...

<Option v-for="mCustomer in arrCustomer" :key="mCustomer.id" :value="mCustomer.id">\{ \{mCustomer.name\}\}</Option>

</Select>

...

</template>

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>

小猿圈web前端讲师认为：授之以鱼更授之以渔，想要[学习web前端][web]首先需要就是端正自己的学习态度，明确学习目标，这样才能坚持学习。想要了解更多关于前端方面的小伙伴web前端自学②群：738735873，可以关注小猿圈每天的动态，会不定期更新互联网编程知识，希望对你的学习有一定的帮助。

转载于:https://juejin.im/post/5cf4d886e51d4510aa0114b2

[web]: https://link.juejin.im?target=https%3A%2F%2Fwww.apeland.cn%2Fweb%2F

小猿圈web前端教程之详解零基础学习VUEX理解和使用

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关零基础小白前端学习之初始CSS

相关 Web前端之vuex基础

相关小猿圈web前端之HTML5拖拽功能实现的拼图游戏

相关小猿圈Linux零基础自学之路

相关小猿圈web前端教程之详解零基础学习VUEX理解和使用

相关小猿圈学习web前端开发的经验分享

相关从零开始，学习web前端之HTML基础

相关小猿圈linux之嵌入式Linux学习步骤

相关小猿圈之2019年前端JavaScript面试题（二）

相关小猿圈linux教程之linux忘记密码解决办法