Vuex给我们的.vue文件结构带来了这些变化
使用vuex前后的对比
使用vuex前
//BookRecommend.vue
<script>
import * as API from '../api/index'
export default{
name:'bookrecommend',
data () {
return {
oBRData:{}
}
},
methods: {
getBookRecommendData(){
API.getBookRecommend()
.then((response)=>{
this.oBRData = response.data;
console.log(response)
})
.catch((err)=>{
console.log(err)
})
}
},
mounted () {
this.getBookRecommendData();
}
}
</script>
使用vuex后
//BookRecommend.vue
<script>
import { mapState } from 'vuex'
export default{
name:'bookrecommend',
computed: mapState([
'index'
]),
methods: {
},
mounted () {
this.$store.dispatch('getBookRecommend');
}
}
</script>
变化
- 剥离了state的管理
- 剥离了异步请求
- .vue文件变得更加"纯粹"了
下面我们就从几个方面来描述一下vuex带给我们的变化。
剥离了state的管理
这个当然是vuex
最主要的任务了。
将组件模块的state
放到了module
中,这里是放在了module/index.js
中。
//module/index.js
import * as API from '../../api/index'
import * as types from '../mutation-types'
//BookRecommend.vue单文件的state管理
const state = {
oBRData: {}
}
const actions = {
...
}
const mutations = {
...
}
export default {
state,
...
}
剥离了异步请求
上一篇从交互到状态变化的Vuex中说了actions
的作用。
将异步处理也放在了module
中的module/index.js
中。
import * as API from '../../api/index'
import * as types from '../mutation-types'
const state = {
oBRData: {}
}
//actions方便做异步操作,这里是获取数据
const actions = {
getBookRecommend({ commit }, playload) {
API.getBookRecommend()
.then((response) => {
commit(types.GET_BOOKRECOMMEND_DATA, {
obr: response.data
})
console.log(response);
})
.catch((err) => {
console.log(err)
})
}
}
const mutations = {
...
}
export default {
state,
actions
...
}
Modules
这个也是上篇文章没说的一个点,具体的见:http://vuex.vuejs.org/zh-cn/modules.html
最后通过new Vuex.Store
将分散的module
合并在一起
//组装module和跟级别的模块并导出 store 的地方
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as mutations from './mutations'
import index from './modules/index'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
where: '发现'
},
actions,
//将modules中的合并
modules: {
index
},
mutations
})
结果
这就是完整的state树,应该很清晰。
首发于我的segmentfault:https://segmentfault.com/a/1190000008721043
Vuex给我们的.vue文件结构带来了这些变化的更多相关文章
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- 一起学习vue源码 - Object的变化侦测
作者:小土豆biubiubiu 博客园:www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e894d 简书:h ...
- ERP条码解决方案,金蝶盘点机条码解决方案,应用PDA的信息化管理能给我们的生产管理带来怎么样的变化的探讨
ERP条码解决方案,金蝶盘点机条码解决方案,应用PDA的信息化管理能给我们的生产管理带来怎么样的变化的探讨. 当前越来越多的大大小小的中国企业已经接受了ERP的思想,大多数的商店,企业,工厂都会上一套 ...
- vue数组更新界面无变化
1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相 ...
- vuex(用了vue就上了一条不归路的贼船)
一.Vuex是干什么用的? 它是用于对复杂应用进行状态管理用的(官方说法是它是一种状态管理模式). “杀鸡不用宰牛刀”.对于简单的项目,根本用不着Vuex这把“宰牛刀”.那简单的项目用什么呢?用Vue ...
- 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
- 1. vue文件结构
1)这是文件规则 <template> <div > </div> </template> <script> Name:"当前的名 ...
- VUE 全局监听sessionStorage变化
在做项目的时候,可能需要在其他模块获取推送的信息或者变量,但是数据量或者说数目少,而且项目中也没有引用VUEX,那么可以下手的方法之一也就是sessionStorage类的浏览器存储了. 首先在全局的 ...
- Vue.js2.0中的变化(持续更新中)
最近自己在学习Vue.js,在看一些课程的时候可能Vue更新太块了导致课程所讲知识和现在Vue的版本不符,从而报错,我会在以后的帖子持续更新Vue的变化与更新,大家也可以一起交流,共同监督学习! 1. ...
随机推荐
- ARC使用小结
内存管理基本原则 内存管理的依循下面的基本原则 自己生成的对象,那么既是其持有者 不是自己生成的对象,也可成为其持有者(一个对象可以被多个人持有) 如果不想持有对象的时候,必须释放其所有权 不能释放已 ...
- JSP获取绝对物理地址
session.getServletContext().getRealPath(""); 但是 getRealPath("a"+File.separator); ...
- JavaScript字符集编码与解码
一.字符集 1)字符与字节(Character) 字符是各种文字和符号的总称,包括乱码:一个字符对应1~n个字节,一字节对应8位,每位用0或1表示. 2)字符集(Character Set) 字符集是 ...
- Oracle DataGuard 升级 [11.2.0.1 -> 11.2.0.4]
Oracle DataGuard 升级 [11.2.0.1 -> 11.2.0.4] Primary: 11.2.0.1 单机,Site A. Standby: 11.2.0.1 单机,Site ...
- 获取app崩溃信息的途径 iOS
获取崩溃日志的几种方法: 1.当用户抱怨闪退时,你可以要求他让设备与iTunes同步,设备与电脑上的iTunes Store同步后,会将崩溃日志保存在电脑上(路径:Mac OS X:~/Library ...
- Swift 2.2 协议和代理
一:代理 两个类之间的传值,类A调用类B的方法,类B在执行过程中遇到问题通知类A,这时候我们需要用到代理(Delegate). 比如:控制器(Controller)与控制器(Controller)之间 ...
- 一个技术汪的开源梦 —— 微信开发工具包(WeixinSDK)
由于春节的关系 WeixinSDK 这个开源项目的进展比预期推迟了大约一个月的时间,值得高兴的是到目前为止该项目的重要模块已经开发完毕. - 关于项目 该项目的背景是现在微信公众号.微信服务号乃至微 ...
- 搜查的PHPCMS,织梦DEDECMS 部分对比分析
对于初学者来说,我想会有相对的了解和认识,自然也有助于今后前端面试的一些小细节!当下学的自然是phpcms phpcms优点: 1. 模块化安装,非常适合安装,拆卸非常方便的. 2. 灵活的标签语法, ...
- Redis 学习之持久化机制、发布订阅、虚拟内存
一.持久化机制 Redis是一个支持持久化的内存数据库,redis会经常将内存中的数据同步到硬盘上来保证数据持久化,从而避免服务器宕机数据丢失问题,或者减少服务器内存消耗提高性能. 持久化方式: 1. ...
- node-webkit制作桌面应用
心血来潮突然想用js尝试写桌面应用,突然发现我大js真的无所不能.在网上搜到了这么一个东东:node-webkit.用Node.js来进行系统资源的访问,用HTML+CSS完成页面的搭建.哇,一切突然 ...