vuex 是数据框架(一个插件)(单项数据的改变流程,组件改数据必须先调Action用dispatch方法)

大型项目vue只能承担视图层的主要内容

大量数据传递的时候,往往需要一个数据框架辅助

例子:多个组件之间的传值很困难的时候,如果我们能吧公用的数据放在一个公共的空间

存储,然后某一个组件改变了数据,其他组件能够感知

start

1.因为vuex做的文件还是比较复杂的,所以我们先创建一个单独的文件夹

/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({})

2.然后在main.js中引入,便可在所有组件中使用

import store from ''./store"

new Vue({
store, //传进根实例
})

3.组件中使用

{{this.$store.state.city}}

4.组件中改变数据

首先组件中调用VUEX中的Actions 用 dispatch方法

然后actions调用Mutations用commit方法

this.$store.dispatch('changeCity', city)  //city为数据 ,派发一个名字叫changCity这样一个Action
//Action需要写在 Store中
export defalut new Store({
state: {}
action: {
chageCity (ctx, city) {}
ctx.commit('chageCity', city) //ctx为执行上下文
}
mutations: {
changeCity('state','city') {
state.city = city
}
}
})

当数据比较简答的时候 可以直接调用mutations

this.$store.commit('changeCity', city)

页面跳转方法

1.a标签

<router-link to="/"> </router-link>

2.js window.location.href

this.$router.push('/')

本地存储(页面刷新后,内容不变)

如果用户关闭了本地存储功能活着隐身模式 就不能用localstorage

所以对于使用localstorage 要做错误捕获,不用处理

我做错

try {
var lastCity = localStorage.city || '上海'
} catch (e) { } //如果隐身模式,loacalstarage.city 就会报错 不会传旨‘sh’

修正后

var lastCity = '上海'
try {
if (localStorage.city) {
lastCity = localStorage.city
}
} catch (e) { }

vuex 高级用法

1.当index文件庞大之后,可以拆分 state mutations 文件组件化

1.创建state.js 文件
然后 export default {}
然后 index.js import 一下

2.模板中引用的state数据太长 我们可以用高级api

import { mapState } from 'vuex'
computed: {
...mapState(['city'])
} //然后模板中直接 this.city就可以了 import { mapState } from 'vuex'
computed: {
...mapState({
currentCity: 'city'
})
} //也可以

3相同的script标签中用的 调用matations也可以简化

import { mapState, mapMutations } from 'vuex'
computed: {
...mapState(['city'])
} methods: {
handleClick (city) {
this.changeCity(city)
}
...mapMutations(['changeCity']) //我们又一个mutations叫 changeCity,
我们把它映射到 changecity的方法里 那么我们要调用这个macations

4.getters

//index.js  film
export default new Vuex.Store({
getters: {
doubleCity(state) {
return state.city + ""
}
}
})
//当我们需要根据state计算新的数据.避免数据冗余,类似computed
import { mapState,mapGetters } from 'vuex'
computed: {
...mapState(['city']),
...mapGetters('doubleCity')
} //然后模板中直接 this.city就可以了 import { mapState } from 'vuex'
computed: {
...mapState({
currentCity: 'city'
})
} //也可以
 

5.非常复杂的业务场景,管理后台系统的时候,很多公用数据在vuex中储存

借助module复杂的motations Actions 拆分

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

part7 vuex实现数据共享的更多相关文章

  1. Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用

    一,数据共享 1.  安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...

  2. vuex实现数据共享

    1.store.js结构 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Sto ...

  3. vue中vuex实现持久化的几种方法

    前提:大家都知道vuex真的数据共享是不持久的,例如登录后一刷新,state中存的token就会消失,导致你需要再次进行登录操作 在这给大家列出几种解决方案: 第一种(也是一些项目中常使用的):使用缓 ...

  4. Vue全局API总结

    1.extend用于创建一个子类Vue,用$mount来挂载 <body> <div id="app"></div> <script> ...

  5. vue中mixin的一点理解

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别?     ...

  6. Vue2.5开发去哪儿网App 从零基础入门到实战项目

    第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...

  7. vue全家桶面试

    vue:主要Vue ​ vue-router:关于路由方面的配置 ​ vuex:数据共享和缓存用 ​ vue-resource:于后台交互用(现在改为axios 但是axios不是Vue里面的东西) ...

  8. Vue.js开发去哪儿网WebApp

    一.项目介绍 这个项目主要参考了去哪儿网的布局,完成了首页.城市选择页面.详情页面的开发. 首页:实现了多区域轮播的功能,以及多区域列表的展示: 城市选择页面:在这个页面实现了城市展示.城市搜索.城市 ...

  9. uniapp自定义简单省市区联动组件

    又双叒一个uniapp组件 最近有一个选择地址的需求,就写了一个省市区联动选择器. 选择日期使用的picker,就照着它简单的整了一个,使用网络请求城市数据,还用到了vuex组件数据共享. 本来自己整 ...

随机推荐

  1. msf生成软件

    生成软件后门程序的命令 win7获取 生成内网软件 启动kali上的http服务 systemctl start apache2 开始msf控制台 msfconsole 使用监听模块 并查看配置  s ...

  2. CentOS操作系统部署zabbix agent服务

    CentOS操作系统部署zabbix agent服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看zabbix的官方手册 1>.点击下载 2>.查看Ubunt ...

  3. firewalld学习-zone的使用和配置

    原文地址:http://www.excelib.com/article/290/show zone文件标签名词解释 target:目标,这个前面学生也已经给大家介绍过了,可以理解为默认行为,有四个可选 ...

  4. Liveness 探测【转】

    Liveness 探测让用户可以自定义判断容器是否健康的条件.如果探测失败,Kubernetes 就会重启容器. 还是举例说明,创建如下 Pod: 启动进程首先创建文件 /tmp/healthy,30 ...

  5. POJ 3371:Flesch Reading Ease 模拟

    Flesch Reading Ease Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2071   Accepted: 60 ...

  6. Azure Cognitive Services- Speech To Text

    Speech 服务是认知服务的一种,提供了语音转文本,文本转语音, 语音翻译等,今天我们实战的是语音转文本(Speech To Text). STT支持两种访问方式,1.是SDK,2.是REST AP ...

  7. 利用Python实现自动扫雷

    自动扫雷一般分为两种,一种是读取内存数据,而另一种是通过分析图片获得数据,并通过模拟鼠标操作,这里我用的是第二种方式. 一.准备工作 我的版本是 python 3.6.1python的第三方库:win ...

  8. JS在不改变原数组的情况下复制一个新的数组

    var a={1,2,3,4} var data= JSON.parse(JSON.stringify(a[0])) a.push(data) a[4]=5 这样就不会改变原数组a的数据

  9. JAVA笔记03 变量和运算符 面试题以及笔记

    标识符的命名规则需要注意哪几点? 定义 就是给类,接口,方法,变量等起名字的字符序列 组成规则 英文大小写字母 数字 $和_ 注意事项 不能以数字开头 不能是java中的关键字 区分大小写 常见的命名 ...

  10. Django(四) 后台管理:创建管理员、注册模型类、自定义管理页面显示内容

    后台管理 第1步.本地化:设置语言.时区 修改project1/settings.py #LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' #设置语言 ...