vuex的基础知识点
时间:2022-07-25
本文章向大家介绍vuex的基础知识点,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vuex的基础知识点
1 安装与引用
引用:npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
2 核心概念
state:vuex的基本数据,用来存储变量,可以实现多个组件都可以访问在这个变量,通常将全局数据将保存在这里。
state: {
counter:1000
},
//在组件中访问
computed:{
count() {
return this.$store.state.counter
}
},
geeter:从基本数据(state)派生的数据,相当于state的计算属性,有些时候我们需要从store中的state中返回特定的模板或者计算,这个时候我们就需要用到Getter
<template>
<div id="app">{{print}}</div>
</template>
<script>
export default {
data(){
return {
print: this.$store.getters.print
}
}
};
</script>
mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
// vue
<template>
<div id="app">{{userinfo}}<button @click="setage">修改</button></div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
methods:{
...mapMutations(['changeAge']),
setage(){
this.changeAge([20])
}
},
computed: {
...mapGetters({
userinfo: "print"
})
}
};
</script>
action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
// store/index/js
export default new Vuex.Store({
state: {
msg: 'hello world',
name: 'rabbit',
age: 18
},
getters: {
print(state) {
return `姓名:${state.name} 年龄:${state.age}`
}
},
mutations: {
changeAge(state, payload) {
state.age = payload[0]
}
},
actions: {
},
modules: {
}
})
<template>
<div id="app">{{userinfo}}<button @click="setage">修改</button></div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
methods:{
...mapActions(['asychangeAge']),
setage(){
this.asychangeAge([18]).then(() => {
console.log('修改完成')
})
}
},
computed: {
...mapGetters({
userinfo: "print"
})
}
};
</script>
modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
export default new Vuex.Store({
// ......
modules: {
moduleA: {
namespaced: true,
state: {
name: 'moduleA'
},
getters: {},
mutations: {
changeName(state, payload) {
console.log(payload)
state.name = payload
}
},
actions: {
asychangeName({ commit }, payload) {
commit('changeName', payload);
}
}
},
moduleB: {
namespaced: true,
state: {
name: 'moduleB'
},
getters: {},
mutations: {
changeName(state, payload) {
console.log(payload)
state.name = payload
}
},
actions: {
asychangeName({ commit }, payload) {
commit('changeName', payload);
}
}
},
}
})
<template>
<div id="app">
{{moduleA}}
<br />
{{moduleB}}
<br />
<button @click="setage">修改</button>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
methods: {
// 收集并重命名模块A中的Action
...mapActions("moduleA", {
asychangeModuleA: "asychangeName"
}),
// 收集并重命名模块B中的Action
...mapActions("moduleB", {
asychangeModuleB: "asychangeName"
}),
setage() {
// 修改模块A中的数据
this.asychangeModuleA("This is the value of moduleA I modified").then(() => {
console.log("修改moduleA成功");
});
// 修改模块B中的数据
this.asychangeModuleB("This is the value of moduleB I modified").then(() => {
console.log("修改moduleB成功");
});
}
},
computed: {
// 收集并重命名模块A中的State
...mapState("moduleA", {
moduleA: state => state.name
}),
// 收集并重命名模块B中的State
...mapState("moduleB", {
moduleB: state => state.name
})
}
};
</script>
- 如何拿到半数面试公司Offer——我的Python求职之路
- Python编程语言发展简史
- 学完Python基础知识后,你真的会python吗?
- 一个人的武林:内网渗透测试思路(二)
- Python数据分析之股票实战
- 这货不是电源:硬件渗透测试平台 – Power Pwn
- Python进阶学习之阅读代码
- 代码安全审计:当file_exists遇上eval
- Python 异常处理完整指南
- 有趣的安全实验:利用多线程资源竞争技术上传shell
- NotSerializableException解决方法NotSerializableException
- 谁蹭了我的WiFi?浅谈家用无线路由器攻防
- 当输入流和输出流同时作用一个文件
- 揭秘:充电宝是如何盗取你的个人隐私的?
- 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 数组属性和方法