Vuex的简单入门
在Vue项目中安装Vuex
npm install vuex --save
在src目录下新建个store文件夹,里面新建index.js 在index.js文件夹中创建Vuex实例
import Vue from 'vue'
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex);
//创建Vuex实例
const store=new Vuex.Store({
state:{
}
})
export default store//导出store
在main.js中引入该文件
import store from './store'
new Vue({
store
})
在这里我们就引入完成了,现在开始编写业务代码 在store/index.js文件中,vuex中的数据源,我们需要保存的数据就保存在这里。
import Vue from 'vue'
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex);
//创建Vuex实例
const store=new Vuex.Store({
state:{
count:100
}
})
export default store//导出store
可以在组件中通过 this.$store.state来获取我们定义的数据;
<template>
<div>
<h1>{{this.$store.state.count}}</h1>
</div>
</template>
页面上就打印个“100”
使用Getters
可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
import Vue from 'vue'
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
state: {
count: 100
},
getters: {
divide: (state) => { //这里的state指向上面定义的
return state.count/2;
}
}
})
export default store //导出store
<h2>{{this.$store.getters.divide}}</h2>
页面上就打印个“50”
使用Mutations
可以将 mutations可以理解为methods
import Vue from 'vue'
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
state: {
count: 100
},
getters: {
divide: (state) => { //上面定义的state对象
return state.count/2;
}
},
mutations:{
add(state){ //上面定义的state对象
state.count = state.count + 1;
},
reduction(state){
state.count = state.count - 1;
}
}
})
export default store //导出store
我们添加两个方法add和reduction,执行加1、减1的操作 在methods定义方法名,引入mutations中定义两个函数
<template>
<div>
<h1>{{this.$store.state.count}}</h1>
<h2>{{this.$store.getters.divide}}</h2>
<input type="button" value="+" @click="addcount" />
<input type="button" value="-" @click="reductioncount" />
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
addcount() {
this.$store.commit("add");
},
reductioncount() {
this.$store.commit("reduction");
}
}
};
</script>
<style>
</style>
使用Action
Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。 Mutations只能是同步。
import Vue from 'vue'
import Vuex from 'vuex'
//使用Vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
state: {
count: 100
},
getters: {
divide: (state) => { //上面定义的state对象
return state.count / 2;
}
},
mutations:{
add(state){ //上面定义的state对象
state.count = state.count + 1;
},
reduction(state){
state.count = state.count - 1;
}
},
actions:{
addNum(context){ //接收一个与store实例具有相同方法属性的context对象
context.commit("add"); //mutatuions里的方法名
},
reductionNum(context){
context.commit("reduction");
}
}
})
export default store //导出store
在组件中接收
methods: {
addcount() {
//this.$store.commit("addNum");
this.$store.dispatch("addNum");
},
reductioncount() {
//this.$store.commit("reductionNum");
this.$store.dispatch("reductionNum");
}
}
我们还可以给方法添加参数
methods: {
addcount() {
var n=20;
//this.$store.commit("addNum");
this.$store.dispatch("addNum",n);
},
reductioncount() {
//this.$store.commit("reductionNum");
this.$store.dispatch("reductionNum");
}
}
并且需要在mutations和actions都添加
mutations:{
add(state,n){ //上面定义的state对象
state.count = state.count + n;
},
reduction(state){
state.count = state.count - 1;
}
},
actions:{
addNum(context,n){ //接收一个与store实例具有相同方法属性的context对象
context.commit("add",n);
},
reductionNum(context){
context.commit("reduction");
}
}
mapState、mapGetters、mapActions 如果我们不喜欢这种在页面上使用“this.$stroe.state.count”这种很长的写法,那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了;
<template>
<div>
<h1>页面获取的值{{this.$store.state.count}}</h1>
<h2>Getters获取的值{{this.$store.getters.divide}}</h2>
<h3>{{countNum}}</h3>
<input type="button" value="+" @click="addcount" />
<input type="button" value="-" @click="reductioncount" />
</div>
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
data() {
return {};
},
computed: {
...mapState({
countNum: state => state.count
})
},
methods: {
addcount() {
var n = 20;
//this.$store.commit("addNum");
this.$store.dispatch("addNum", n);
},
reductioncount() {
//this.$store.commit("reductionNum");
this.$store.dispatch("reductionNum");
}
}
};
</script>
<style>
</style>
Modules
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
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 的状态
- Linux学习 - SED操作,awk的姊妹篇
- Android面试之高级篇
- 解密所有APP运行过程中的内部逻辑
- RecyclerView数据动态更新
- android PakageManagerService启动流程分析
- RFID入门:Mifare1智能水卡破解分析
- RecyclerView点击事件处理
- Python 实现一个火车票查询的工具
- HTTPS迎来春天:Chrome计划将所有HTTP标记为不安全
- View绘制流程
- Linux Rootkit系列一:LKM的基础编写及隐藏
- Swift基础语法(常量变量、数据类型、元组、可选、断言)
- 【实战】Python 读写 Excel 实例应用
- 10万WordPress网站沦陷:恶意软件SoakSoak来了
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python 给下载文件显示进度条和下载时间的实现
- pytorch 中的重要模块化接口nn.Module的使用
- 东京大学版「一生一芯」:自制CPU、C编译器,还成功运行了类Unix系统
- python实现将range()函数生成的数字存储在一个列表中
- Pytorch 使用不同版本的cuda的方法步骤
- CVE-2020-14645 Weblogic远程代码执行漏洞分析
- PaGoDo:一款功能强大的被动式Google Dork
- 微软轻量级系统监控工具sysmon原理与实现完全分析
- 用Windows电脑训练深度学习模型?超详细配置教程来了
- rConfig中的远程代码执行漏洞分析
- CVE-2020-9964:iOS中的信息泄露漏洞分析
- ReconSpider:一款功能强大的高级OSINT框架
- Python 3.9来了!这十个新特性值得关注
- IRFuzz:一款基于YARA规则的文档文件扫描工具
- 内网渗透测试研究:从NTDS.dit获取域散列值