自我总结，关于vuex简单使用的流程_vuex 流程

提示：本文章仅仅为自己学习记录为由，其中很多可能有误

---

前言

大白话简单使用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
1
2
3
4
5
6
7
8
9
10
11
12

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.在getters暴露数据

在getters暴露数据后，外面组件就可以获取传入vuex的值

//将组件传入modules里面的值暴露在外，方便外面的组件调用传来的值
const getters = {
	detailPopState:state=>state.goods.detailPopState
}
export default getters;
1
2
3
4
5

三、组件对vuex的传递与获取

1、在组件引入mutations与getters

<script>
	//引入vuex的Mutations，Mutations中有改变、获取参数的方法
	import {
		mapMutations,
		mapGetters
	} from "vuex"
</script>
1
2
3
4
5
6
7

2、结构mapMutations

	...mapMutations(["SET_PRO_SPECS"])
1

3、传参

			selectSpecs(){
				this.SET_PRO_SPECS(true)
			}
1
2
3

4、获取参数

在computer里面结构getters中的值，在html代码中就可以调用vuex的值

computed: {
			...mapGetters(["detailPopState"])
		},
1
2
3

渲染

<view>{{detailPopState}}</view>
1

总结

自己保存使用流程笔记