vuex 映射

最新推荐文章于 2022-09-16 18:01:11 发布

可见雾凇岛

最新推荐文章于 2022-09-16 18:01:11 发布

阅读量334

点赞数

文章标签： servlet junit java

本文链接：https://blog.csdn.net/qq_48513370/article/details/126352793

版权

本文详细介绍了Vuex作为Vue全局状态管理工具的使用，包括state、getters、mutations和actions的原理及应用。通过实例展示了如何创建模块、处理命名空间以及使用映射函数简化组件与Vuex的交互。Vuex使得组件间的通信更加有序，同时提供了异步操作的能力。

摘要由CSDN通过智能技术生成

定义

vuex是vue全局状态的管理工具
vuex数据更新,其引用组件都会响应式的更新

模块

state

存放数据的地方
组件中
$store.state.xxx
 state:{
 cartNum:10
}

getters

从现有数据计算出新数据
组件中
$store.getters.xxx
getters:{
fee(state){return state.price*0.5}

mutations

改变state(唯一方式)
组件中
$store.commit(方法,数据)
mutations:{
SET_CARTNUM(state,data){
   state.cartNum = data;
   }
}

actions

异步方法
组件中
$store.dispatch(方法，数据）

actions:{
setCart(context,data){
        setTimeout(()=>{
            context.commit("SET_CARTNUM",data)
        },4000)
   }
}

modules

module

把vuex的数据分成多个子模块(添加子组件)
定义模块 store/modules/cart.js
export default {
   state:{ goodlist:[]},
  getters:{},
   mutations:{},
   actions:{}
}
在store/index.js 导入模块
import cart from './modules/cart.js'
注册模块
modules:{ cart}
组件中访问模块的state 需要添加模块名
$store.state.cart.goodlist
组件中访问 mutatioins,actions 中的方法,不需要添加模块名
$store.dispatch("addCart",good)
$store.dispatch("getCart")

图解

常用单词

store仓库
commit 提交
dispatch 触发
state 状态/数据
mutations 改变
actions 动作
getters 获取器
modules 模块

模块的命名空间

作用：避免命名冲突

namespaced:true

state的访问默认是有命名空间的

getters,actions,mutations需要开启后才有命名空间

vuex的映射

mapState 把vuex的state在computed映射为组件的data
...mapState({
score:state=>state.test.score
})
test是模块名，score数据名
mapGetters

没有命名的空间
...mapGetters({
fee:"fee"
}),
有命名空间
...mapGetters({
"rank":"test/rank"
})
mapMutations

没有命名空间
...mapMutations
"setScore":"SETY_USERINFO"
}
mapActions

没有命名空间
...mapActions({
login:"login"
}),
有命名空间
...mapActions({
log:"test/login"
})