vuex 快速上手,具体使用方法总结(含使用例子)
网上有关vuex的文章很多,但有些比较复杂,这篇文章能让你快速使用vuex:
vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到)
结构:
- state 存放状态
- mutations state成员操作(修改state值唯一的方法)
- getters 加工state成员给外界
- actions 异步操作
- modules 模块化状态管理
vuex 用法:
1. 安装:npm install vuex --save (安装vuex保存到本地)
2. 创建js文件(见下图,这里我随意命名为store.js)
3.然后我们在main.js文件中:
3.1 引入文件(根据自己的路径写): import store from './store.js';
3.2 在vue实例全局引入store对象:new Vue({store})
以上步骤就完成了,接下来是具体使用方法
//下面是一个js文件,用最简单最全的例子展示了全局数据 city 和 cityID 的声明以及改变的方法;
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
city: '深圳',
cityID: "1"
},
getters: {
getCity(state) { //方法名随意,主要是来承载变化的city的值,下面mutations,actions里面的方法名也是随意定的
return state.city
},
getCityId() { //方法名随意,主要是用来承载变化的cityID的值,下面mutations,actions里面的方法名也是随意的
return state.cityID
}
},
mutations: {
setCity(state, value) {
state.city = value;
},
setCityID(state, value) {
state.cityID = value;
}
},
actions: {
selectCity(context, params) {
context.commit('setCity', params.city);
},
selectCityID(context, params) {
context.commit('setCityID', params.id);
}
}
});
export default store;
获取和修改state有使用辅助函数和不使用两种方法,如果使用,请在使用的文件中添加:
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
获取state的方法:
1.不引入 mapState(不使用辅助函数): this.$store.state
2.引入 mapState(使用辅助函数):
computed: {
//设置别名,起到简化代码的作用,比如this.$store.state.cityID可以用this.cId替代
// 方法一:
// ...mapState({
// cId: state => state.cityID,
// cname:state => state.city
// }),
// 方法二:
// ...mapState({
// cId: 'cityID',
// cname:'city'
// }),
// 方法三(不设置别名,直接使用this.cityID即可):
...mapState(['cityID','city']),
},
修改state的方法:
1.不引入 mapState(不使用辅助函数):
方法一: 用this.$store.commit执行mutation里的方法
//this.$store.commit("setCityID", 6);
方法二: 用 this.$store.dispatch执行actions里的方法
//this.$store.dispatch("selectCity", { id: 6});
2.引入 mapState(使用辅助函数),和获取state一样能设置别名,下面不配置别名:
methods: {
...mapActions(['cityID','selectCityID']),
changeId(params) { //params为要修改的数,比如6
this.selectCityID({ id:params });
console.log(this.$store.state);//这时候打印出来cityID变为6了
}
},
vuex 快速上手,具体使用方法总结(含使用例子)的更多相关文章
- vue.js和vue-router和vuex快速上手知识
vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...
- 9、vuex快速上手
vue脚手架 npm install -g vue-cli usage: vue init example: vue init webpack myvue 安装vuex: npm i -S vuex ...
- smarty 快速上手
smarty半小时快速上手入门教程 投稿:shichen2014 字体:[增加 减小] 类型:转载 时间:2014-10-27我要评论 这篇文章主要介绍了smarty半小时快速上手入门教程,以实例的形 ...
- smarty半小时快速上手入门教程
http://www.jb51.net/article/56754.htm http://www.yiibai.com/smarty/smarty_functions.html http://www. ...
- 『转载』Debussy快速上手(Verdi相似)
『转载』Debussy快速上手(Verdi相似) Debussy 是NOVAS Software, Inc(思源科技)发展的HDL Debug & Analysis tool,这套软体主要不是 ...
- 如何快速上手一个新技术之vue学习经验
碰到紧急项目挪别人的vue项目过来直接改,但是vue是18年初看过一遍,18年底再来用,早就忘到九霄云外了,结果丢脸的从打开vue开始学,虽然之前在有道云笔记做了很多记录,然后没有系统整理.所以借这次 ...
- WebAPI调用笔记 ASP.NET CORE 学习之自定义异常处理 MySQL数据库查询优化建议 .NET操作XML文件之泛型集合的序列化与反序列化 Asp.Net Core 轻松学-多线程之Task快速上手 Asp.Net Core 轻松学-多线程之Task(补充)
WebAPI调用笔记 前言 即时通信项目中初次调用OA接口遇到了一些问题,因为本人从业后几乎一直做CS端项目,一个简单的WebAPI调用居然浪费了不少时间,特此记录. 接口描述 首先说明一下,基于 ...
- 【opencv入门篇】 10个程序快速上手opencv【上】
导言:本系列博客目的在于能够在vs快速上手opencv,理论知识涉及较少,大家有兴趣可以查阅其他博客深入了解相关的理论知识,本博客后续也会对图像方向的理论进一步分析,敬请期待:) PS:官方文档永远是 ...
- 三分钟快速上手TensorFlow 2.0 (下)——模型的部署 、大规模训练、加速
前文:三分钟快速上手TensorFlow 2.0 (中)——常用模块和模型的部署 TensorFlow 模型导出 使用 SavedModel 完整导出模型 不仅包含参数的权值,还包含计算的流程(即计算 ...
随机推荐
- Spring_通过Bean的Factory配置Bean
package com.tanlei.bean.FactoryBean; import org.springframework.beans.factory.FactoryBean; public cl ...
- Spring中使用DataSourceTransactionManager进行事务管理的xml配置
在一个业务的实现过程中,可能需要多条sql完成对数据库的操作,比如账户登录,需要匹配用户名和密码,然后要增加积分,还要记录登录的ip和时间,这可能需要三个sql语句,这三个语句应当是一个整体,任意一个 ...
- windows.open window.location.href的用法和区别
window.location.href 只能在当前页面打开,不能用新窗口打开 windows.open("URL","窗口名称","窗口外观设定& ...
- Date日期类,Canlendar日历类,Math类,Random随机数学类
Date日期类,SimpleDateFormat日期格式类 Date 表示特定的时间,精确到毫秒 常用方法 getTime() setTime() before() after() compareT ...
- cocos2dx 2.2.3在Windows 7 64bit上搭建开发环境
最终弄完了cocos2dx 2.2.3在windows 7 64bit上的环境搭建,过程比較揪心.揪心的主要原因还是引擎的开发人员和官方文档的写作者都是偏爱MAC OS的,所以官方文档中的安装方法是以 ...
- springboot项目启动,但是访问报404错误
启动类Application上加了@ComponentScan(basePackages = {})这个注解导致controller扫描不到导致的,如果加了这个注解,springboot就不会扫描Ap ...
- 如何处理iOS中照片的方向
使用过iPhone或者iPad的朋友在拍照时不知是否遇到过这样的问题,将设备中的照片导出到Windows上时,经常发现导出的照片方向会有问题,要么横着,要么颠倒着,需要旋转才适合观看.而如果直接在这些 ...
- python 文件读写编码
- JQ取消hover事件
$('a').unbind('mouseenter').unbind('mouseleave');
- 直击 KubeCon 2019 现场,阿里云 Hands-on Workshop 亮点回顾
2019 年 6 月 24 日,KubeCon + CloudNativeCon 第二次在中国举办.此次大会阿里共有 26 个技术演讲入选,并有两场沙龙活动,阿里云专家也与技术极客们也再次相聚.Kub ...