提到vuex,就不能不先提vue.
我个人开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jquery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入改变时监听各种事件以改变页面逻辑数据.当然最早的时候,我们使用html内部的value来记载各种数据,但这种方式在今日看来就有些简单粗暴了,难以使用复杂的页面逻辑.这也正是我开始使用vue的初衷--数据双向绑定.
但对于vue而言,还有一项很强大的功能,就是组件功能.对于这项功能,有两种使用理解:其一是制作一些简单轻便的轮子,很难适用于其他项目但很适用于项目内部的多个页面;其二是路由页面,理解起来就是将每个页面看做是一个组件,而不是一个单独的html页面;
再开始使用vue的时候,我在每个页面都会new一个新的vue来实现页面内部的数据双向绑定,这种用法本来无可厚非,也能兼容老项目,但仅有一点不足(或者说是老项目的通用不足之处),即逻辑数据的管理是以html页面为单位的,页面之间的数据没有什么可关联的太好方法(html页面之间是通过iframe实现连接的,但相互之间的数据交流却没有太好的api,且也容易出现兼容性问题).
vuex就是为此准备的,当然有一个前提,就是页面关联方式,要通过vue组件的方式关联起来.使用此种方式后,在使用前台vue进行编程的一些思想,就要发生一些转变.这里列举一下我们可通过数据交流所做的一些事情:
对于一个前台项目而言,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的大致逻辑.
外界调用方式,可参考如下(这里仅列举必要代码):
<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的使用方式,个人认为比较中的说明,已经放在代码中的注释里了.
本文更偏向于让新手去理解和上手,故代码偏向于更简单的方案.
实际使用中,对于缓存更替的考虑可能要更复杂.
在学习Vuex之前,先了解一下“单向数据流”。Vuex核心就是它的store,其中,有三个重要的部分,State:通过它存取多个组件共享的数据。Mutations:可以改变State中的数据,Actions:提交mutation,可以包含任意异步操作这一步不是必要的。
Vuex是一个专门为Vue.js框架设计的、用于对Vue.js应用程序进行状态管理的库,它借鉴了Flux、redux的基本思想,将共享的数据抽离到全局,以一个单例存放,同时利用Vue.js的响应式机制来进行高效的状态管理与更新。
主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径
vuex 规定更改 state 的唯一方法是提交 mutation,主要是为了能用 devtools 追踪状态变化。那么,提交 mutation 除了最主要的更改 state,它还做了其它一些什么事情呢,让我们来一探究竟。
Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。
已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成,然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数 mutation 是同步执行,不是异步执行。
其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。一种是state里的数据全部是通过请求来触发action或mutation来改变
首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下
随着Vue应用程序的大小增加,Vuex Store中的actions和mutations也会增加。本文,我们将介绍如何将其减少到易于管理的东西。Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!