提示:本文章仅仅为自己学习记录为由,其中很多可能有误
文章目录
前言
大白话简单使用vuex进行组件之间的转递参数
提示:以下是本篇文章正文内容,下面案例可供参考
一、vuex是什么?
官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
我的理解:就是一个方便组件之间传递参数的工具,是组件数据的公共管理仓库,传统的组件传参如果是嵌套组件,会子传父,父传爷,爷传回另一个子,太麻烦了,所以就引入了vuex
二、使用步骤
1.配置vuex
创建store文件:每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。
创建getters.js文件:getters 会暴露为 store.getters 对象,你可以以属性的形式访问这些值,暴露出去,外面组件才好调用
创建modules目录:里面存放着不同组件传递进去的参数
2.在modules目录创建js文件
modules文件下的.js文件:存放着组件传递过来的值,组件可以通过mutations对里面的值进行修改
const goods = {
state:{
detailPopState:false
},
//接收外面组件转入的参数
mutations:{
SET_DETAIL_STATE(state,value){
state.detailPopState = value
}
}
}
export default goods
3.在index下引入声明
需要在index中引入创建的js文件,才能使用
import Vue from "vue"
import Vuex from "vuex"
import goods from "@/store/modules/goods.js"
import getters from "./getters.js"
Vue.use(Vuex)
const store = new Vuex.Store({
getters,
modules:{
goods
}
})
export default store
4.在getters暴露数据
在getters暴露数据后,外面组件就可以获取传入vuex的值
//将组件传入modules里面的值暴露在外,方便外面的组件调用传来的值
const getters = {
detailPopState:state=>state.goods.detailPopState
}
export default getters;
三、组件对vuex的传递与获取
1、在组件引入mutations与getters
<script>
//引入vuex的Mutations,Mutations中有改变、获取参数的方法
import {
mapMutations,
mapGetters
} from "vuex"
</script>
2、结构mapMutations
...mapMutations(["SET_PRO_SPECS"])
3、传参
selectSpecs(){
this.SET_PRO_SPECS(true)
}
4、获取参数
在computer里面结构getters中的值,在html代码中就可以调用vuex的值
computed: {
...mapGetters(["detailPopState"])
},
渲染
<view>{{detailPopState}}</view>
总结
自己保存使用流程笔记