Vuex新手的理解与使用详解新手的理解与使用详解
主要介绍了Vuex新手的理解与使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定
的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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 {
评论0