Vuex基础
Vuex基础
vuex状态管理模式,解决组件之间互相传递的问题
使用步骤
- 安装vuex:npm install vuex
- 在src文件下新建store文件夹下新建idnex.js(写和vuex相关的)
引入vuex:import Vuex from “vuex”
引入vue:import Vue from “vue”
注册vuex:Vue.use(Vuex)
导出给main.js:export default store - 将store/index.js导入到main.js:import store from “./store”
store挂在到根实例上
内容
- state:需要共享的数据
- getter:相当于一个计算属性
- mutation:修改store里的数据
- action:帮助异步
- 辅助函数:mapState,mapGetters,mapMutations,mapActions
- 模块
state:需要共享的数据
新建store文件夹,在store文件夹下新建index.js
const store = new Vuex.Store({
//所有需要共享的数据
state:{
//数据可以是字符,数值等...
msg:"共享数据",
money:200
}
})
//取到vuex中的数据,访问store实例, this当前组件实例
this.$store.state.msg
getter:相当于一个计算属性
计算属性不是函数不能传参,但是可以return function(){}
//默认getters里可以接受state
getters:{
meiyuan:function(state){
return function(rate){
return state.moeny/rate;
}
}
}
//取值
msg:this.$store.getters.meiyuan(10)
//简化写法:
getters:{
meiyuan:state=>rate=>{state.moeny/rate};
}
不推荐使用在data里面 msg:this.$store.state.msg 取数据
推荐写在computer里,数据才是响应式的
computed:{
msg(){
return this.$store.state.msg;
}
}
mutation:修改store里的数据
更改Vuex的store中的状态唯一的方法是提交mutation
mutations必须是同步函数
//第一种写法
mutations:{
//接受state当参数
const(state){
state.money = state.money-10;
}
}
//改数据,提交mutation
methods:{
//点击事件
huaqian(){
this.$store.commit("cost");
}
}
mutations本质是一个方法,可以传参
mutations:{
const(state,n){
state.money = state.money - n;
}
}
methods:{
//点击事件
huaqian(){
this.$store.commit("cost",5);
}
}
//第二种写法,直接传入对象
//传对象的参数名建议使用payload
mutations:{
cost(state,payload){
state.money = state.money - payload.num
}
}
methods:{
huaqian(){
this.$store.commit({
type:"cost",
money,???
num:10,
})
}
}
action:帮助异步
//第一种写法
actions:{
//进行异步操作,context相当于store实例
make(context,num){
//异步操作
context.commit({
type:"cost",
money:10,
num:num,
})
}
}
//第二种写法
actions:{
make({commit},num){//结构
//异步操作
commit({
type:"cost",
money:10,
num:num,
})
}
}
//使用
methods:{
huaqian(){
//调用
this.$store.dispatch("make",100)
}
}
辅助函数:mapState,mapGetters,mapMutations,mapActions
- mapState
引入import {mapState} from ‘vuex’ //不是默认导出不能随便换名
//mapState的结果返回是一个对象
computed:mapState({
msg:'msg' //等同于msg:this.$store.state.msg
})
//还可以用数组直接接受,把vuex中的msg映射成当前组件的msg
computed:mapState(['msg','money','num'])
//写其他计算属性
computed:{
...mapState(['msg','money','num']),//扩展运算符拆分,拆成键值对
fn(){
return this.box 1
}
}
- mapGetters
同mapState
引入import {mapState} from ‘vuex’
computed:{
...mapGetters(['commsg','commoney','comnum'])//扩展运算符拆分,拆成键值对
}
- mapMutations
引入import {mapMutations} from ‘vuex’
methods:{
...mapMutations(['changeMsg'])
}
- mapActions
引入import {mapActions} from ‘vuex’
methods:{
...mapActions(['changeMsg'])
}
使用模块
store/modules存放模块
store/modules/modulesA
export defalut{
state:{},
getters:{},
mutations:{},
actions:{}
}
在store/index.js导入
import modulesA from "./modules/modulesA"
//注册
modules:{
modulesA
}
取模块中的数据 this.$store.state.moduleA.msg
使用辅助函数同上
...mapState({
text:state=>(state.moduleA.text " " state.moduleB.text),
})
...mapGetters({
detail:"moduleA/detail"
}),
...mapMutations(["setText"]),
...mapActions({
modifyName:"modifyName",
callAction:"moduleA/callAction"
}),
还可以开启模块命名空间namespace
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggfgak
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13