vuex 业务使用
1 创建变量
cityVuex.js export default {
state: {
cityArr: []
},
mutations: {
setCityArr (state, arr) {
state.cityArr = arr
}
},
actions: {}
}
2.合并变量
import Vue from 'vue'
import Vuex from 'vuex' import user from './module/user'
import app from './module/app'
import pageInfo from './module/pageInfo'
import cityVuex from './module/cityVuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
//
},
mutations: {
//
},
actions: {
//
},
modules: {
user,
pageInfo,
app,
cityVuex
}
})
上面两块都是创建变量部分
下面是页面引用
import { mapMutations, mapState } from 'vuex' 这里就是展开变量 computed: {
...mapState({
cityArr: state => state.cityVuex.cityArr
})
}, 赋值变量 methods: {
...mapMutations(['setCityArr']), 由于我迪调用的城市组件 可能改写原数组,所有,再转到data下用 data () {
return {
innerCityOptions: this.cityArr,
vuex 业务使用的更多相关文章
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- 5分钟带你入门vuex(vue状态管理)
如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习 ...
- Vuex入门(转)
参考:https://segmentfault.com/a/1190000015782272 https://www.cnblogs.com/y896926473/p/6709733.html 如果你 ...
- vue项目配置vuex
在vue项目中各组件之间传值非常的好用,但是当组件数量多的时候,就会感觉到多个组件之间传值就会变的非常痛苦.因此就需要使用vuex来管理数据值,这样在任何页面不需要传值过来的情况下就可以拿到我们想要的 ...
- vue | 基于vue的城市选择器和搜索城市对应的小区
城市选择器应该是比较常用的一个组件,用户可以去选择自己的城市,选择城市后返回,又根据自己选择的城市搜索小区. 功能展示 这是选择结果 这是选择城市 这是搜索小区 这是搜索小区接口,key为城市名字,i ...
- 购物车业务逻辑(vuex)
list(列表页): 1:发送ajax请求,获取相应的数据 2:给每一个上平添加一个点击事件 3:每一个商品都要有一个ID 4:当点击商品时,将商品id值传递给详情页 details(详情页): 1: ...
- Vuex原来可以这样上手
在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速.vue实现了Dom与viewModel双向绑定,使其视图的更新影响模型,模型的更新影响视图,你会不会 ...
- 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
- Vue.js 服务端渲染业务入门实践
作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...
随机推荐
- oracle存储过程随笔
有时间要把最近总结的存储过程的问题总结一下,先占坑: create or replace procedure test_proc2 as cursor cur is select YWR,YWRZJH ...
- Docker的部署安装(CentOS)
环境准备 操作系统需求 为兼容企业级应用,学习选用Centos7做为部署安装Docker的系统平台 # 通过以下命令可查看系统版本和内核版本等信息 cat /etc/redhat-release #- ...
- Ajax 请求参数过多导致 400 错误 and BCryptPasswordEncoder 加密判断
2019/06/19 先分享一种密码加密方式: Spring Security 提供了 BCryptPasswordEncoder类, 实现Spring的PasswordEncoder接口使用BCry ...
- RxSwift学习笔记之Subject
本文为原创文章,转载请标明出处 AsyncSubject 一个AsyncSubject只在原始Observable完成后,发射来自原始Observable的最后一个值.它会把这最后一个值发射给任何后续 ...
- ckeditor 捕获键代码
<!--<script type="text/javascript"> var ctrlKey = false; var shiftKey = false; if ...
- USB小白学习之路(8)FX2LP cy7c68013A——Slave FIFO 与FPGA通信(转)
此博客转自CSDN:http://blog.csdn.net/xx116213/article/details/50535682 这个博客只对自己理解CY7C68013的配置有一定的帮助,对于配置CY ...
- 达拉草201771010105《面向对象程序设计(java)》第七周学习总结
达拉草201771010105<面向对象程序设计(java)>第七周学习总结 实验七继承附加实验 实验时间 2018-10-11 1.实验目的与要求 (1)进一步理解4个成员访问权限修饰符 ...
- python3.5以及scrapy,selenium,等 安装
一.python3.5安装和配置 在安装的时候无意间发现了,python3.6没有给我自定义安装的机会,直接就C盘见:因此我选择了python3.5.<安装部分跳过,至于一条吃过痛苦的建议:不要 ...
- unittest实战(一):用例框架
import unittest class forTest0(unittest.TestCase): @classmethod def setUpClass(cls) -> None: prin ...
- kafka知识整理
title: kafka知识整理 date: 2019-06-18 10:59:46 categories: MQ tags: kafka --- 转载自:https://www.cnblogs.co ...