使用vuex的流程随笔
1.在建好的vue项目中新建一个vuex文件夹在此文件夹下建一个index.js文件,在此文件下引入vuex 模块(当然需要先npm下载)和vue模块,在引入你所有的自定义的module.js模块(下边会讲module的内容),然后使用vuex
Vue.use(Vuex) ;在导出时新创建一个Vuex的Store的对象,在这个对象中使用modules:{把你自定义的模块赋值}代码如下:
import Vuex from 'vuex'
import Vue from 'vue'
import home from '../page/home/moudlehome.js';
import city from '../page/city/moudlecity.js';
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
home:home, //this.$store.state.home
city:city //this.$store.state.city
}
})
2.在module.js中使用vuex的核心内容并发送axios请求(前提是在页面渲染完后就发送请求所以需要在总组件中设置mounted() { if(this.$store.getters.shouldGetData){
this.$store.dispatch("getSwiperInfo");
} }来传值给module中的actions并且在getSwiperInfo()函数中发送axios异步请求,代码如下:
import axios from 'axios';
export default {
//数据内容
state:{
swiperInfo: [],
swiperInfo1: []
},
//异步操作
actions:{
getSwiperInfo(context){
axios.get('/static/index.json')
.then((response)=>{
if (response.status === 200) {
const {data} = response.data;
context.commit("changeSwiperInfo",data)
}
})
}
},
//对数据内容的更新
mutations:{
changeSwiperInfo:(state,data)=>{
state.swiperInfo = data.swiperInfo;
state.swiperInfo1 = data.swiperInfo1
}
},
//对数据的二次包装对网页的一种优化
getters:{
shouldGetData(state){
if(!state.swiperInfo.length&&
!state.swiperInfo1.length){
return true;
}else{
return false;
}
}
}
}
3.在子组件中绑定并使用数据、
在子组件中使用
computed:{
swiperInfo(){
return this.$store.state.home.swiperInfo;
}
}
绑定数据
然后就可以在你的实例化循环中使用swiperInfo in item来使用数据了
使用vuex的流程随笔的更多相关文章
- vuex介绍和vuex数据传输流程
1.什么是vuex? 公共状态管理:解决多个非父子组件传值麻烦的问题:简单说就是多个页面都能用Vuex中store公共的数据 a.并不是所有的数据都要放在Vuex中,只有各个组件公用的一些数据会放在V ...
- Vue--- 使用vuex使用流程 1.0
Vuex 1.安装vuex npm install -save vuex 2. 引入 创建store文件夹目录 创建 vuex 指挥公共目录 store['state','action ...
- TT流程随笔
细节: 如果本地可以自动登录, 先实现本地登录,发送事件通知,再请求登录服务器 如果本地不可以登录(第一次或退出后),直接请求登录服务器 登录服务器返回消息服务器ip port / 文件服务器 链接消 ...
- vuex:使用思路总结
1. vuex是什么? 是一种数据状态管理机制. 2.vuex的构成和作用: state: 存放需要被管理的属性的对象 getters: 方便在state中做集中处理,可以把state作为第一个参数 ...
- 说一说Vuex有哪几种状态和属性
vuex的流程 页面通过mapAction异步提交事件到action.action通过commit把对应参数同步提交到mutation mutation会修改state中对应的值.最后通过getter ...
- vue2.0自学笔记
前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...
- vue 工作学习总结
配置ESlint yarn 初始化 yarn init yes 添加依赖 yarn add [package] 升级依赖 yarn upgrade [package] 移出依赖 yarn remove ...
- </2017><2018>
>>> Blog 随笔原始文档及源代码 -> github: https://github.com/StackLike/Python_Note >>> 统计信 ...
- React与Vue的相同与不同点
我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架.所以要想前端的开发那么必须掌握好这两个框架. 那么这两个框架有什么不同呢? React 和 Vue 相同 ...
随机推荐
- python的迭代器、生成器、三元运算、列表解析、生成器表达式
一 迭代的概念 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前 ...
- 原生javaScript完成Ajax请求
使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...
- lucene构建restful风格的简单搜索引擎服务
来自于本人博客: lucene构建restful风格的简单搜索引擎服务 本人的博客如今也要改成使用lucene进行全文检索的功能,因此在这里把代码贴出来与大家分享 一,文件夹结构: 二,配置文件: 总 ...
- VC6.0VB6.0 Scratch等软件
VC6.0VB6.0 Scratch等软件 http://pan.baidu.com/s/1nv4hJrb
- Shuttle ESB实现消息推送
ESB全称Enterprise Service Bus,即企业服务总线.它是传统中间件技术与XML.Web服务等技术结合的产物. ESB的出现改变了传统的软件架构,能够提供比传统中间件产品更为便宜的解 ...
- 数据共享之相互排斥量mutex
相互排斥量介绍 相互排斥量能够保护某些代码仅仅能有一个线程运行这些代码.假设有个线程使用相互排斥量运行某些代码,其它线程訪问是会被堵塞.直到这个线程运行完这些代码,其它线程才干够运行. 一个线程在訪问 ...
- cocos2d-x 中XML解析与数据存储
一不小心就玩了一周的游戏了.哎.玩的时候时间过得总是这么快... 于是今天决定看一下之前不怎么非常熟悉的XML;(之前做游戏时数据的储存用到过XML,但这块是还有一个同事在做,所以不怎么熟悉), 看了 ...
- centos6.5配置SSH免password登录
创建新用户:useradd hadoop 设置password:passwd hadoop,输入自己想要的password就可以.之后su hadoop切换用户 改动主机名:vim /etc/sysc ...
- Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)
时隔一周多,因为一些别的事情绊住了,下面接着写.中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://v ...
- 使用XMLHttpRequest解析json
不适用内函数或者promise的方式,可以在外部提取到json数据 <!DOCTYPE html> <html lang="en"> <head> ...