与 vue2 中使用方式类似，复习一下下

# state

state 提供位移的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储

在 state 中定义一个数据

	import { createStore } from 'vuex'

	export default createStore({
	state: {
	username: 'zs'
	},
	})

使用方法

1. 直接使用

<p>姓名：{ $store.state.username }</p>

2. 通过 vuex 仓库获取数据

	// 导入
	import { useStore } from 'vuex'

	export default {
	name: 'app',
	setup() {
	// 使用 vuex 仓库
	const store = useStore()

	console.log(store.state.username);
	},
	}

# getters

用于对 Store 中的数据进行加工处理形成新的数据，类似 vue 中的计算属性

定义一个方法

	export default createStore({
	state: {
	username: 'zs'
	},
	getters: {
	newName(state) {
	return state.username + '!!!'
	}
	},
	mutations: {
	},
	actions: {
	},
	modules: {
	}
	})

使用方法

直接使用

<p>姓名：{ $store.getters.newName }</p>

从 vuex 仓库中获取数据

	<script>
	import { useStore } from 'vuex'

	export default {
	name: 'app',
	setup() {
	// 使用 vuex 仓库
	const store = useStore()
	// 获取 getters 数据
	console.log(store.getters.newName);
	},
	}
	</script>

# mutations

Mutation 用于变更 Store 中的数据。

只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据
通过这种方式虽然操作起来繁琐一些，但是可以集中监控所有数据的变化

在 mutation 中定义一个函数

	import { createStore } from 'vuex'

	export default createStore({
	state: {
	username: 'zs'
	},
	getters: {
	newName(state) {
	return state.username + '!!!'
	}
	},
	mutations: {
	updateName(state) {
	state.username = 'ls'
	}
	},
	})

使用方法 store.commit('')

	<template>
	<div>
	<!-- 1. 使用根模块 state 的数据 -->
	<p>姓名：{ $store.state.username }</p>

	<!-- 2. 使用根模块的 getters 的数据 -->
	<p>姓名：{ $store.getters.newName }</p>

	<button @click="updateName">更改姓名</button>

	</div>
	</template>

	<script>
	import { useStore } from 'vuex'

	export default {
	name: 'app',
	setup() {
	// 使用 vuex 仓库
	const store = useStore()

	const updateName = () => {
	\|----------------------------\|
	\| store.commit('updateName') \|
	\| -------------------------- \|
	}

	return { updateName }

	},
	}
	</script>

# Action

Action 用于处理异步任务

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 mutation 的方式间接变更数据。

	import { createStore } from 'vuex'

	export default createStore({
	state: {
	username: 'zs'
	},
	getters: {
	newName(state) {
	return state.username + '!!!'
	}
	},
	mutations: {
	updateName(state) {
	state.username = 'ls'
	}
	},
	actions: {
	updateName(context) {
	setTimeout(() => {
	context.commit('updateName')
	}, 1000);
	}
	},
	modules: {
	}
	})

使用方法 store.dispath('mutation中的方法')

	<script>
	import { useStore } from 'vuex'

	export default {
	name: 'app',
	setup() {
	// 使用 vuex 仓库
	const store = useStore()

	const updateName = () => {
	// 调用 actions 函数
	store.dispatch('updateName')
	}

	return { updateName }

	},
	}
	</script>

# modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块 —— 从上至下进行同样方式的分割

存在两种情况

默认的模块，除了 state 区分模块，需要使用 { $store.state.modulesA.username } 来获取，其他 getters , mutations , actions 都在全局。
带命名空间 namespaced:true 的模块，所有功能区分模块，更高封装度和复用

# 简略一些

好像是挺简单的，可以复杂一点，但是看得更加清晰，那么开始吧

在 store 文件下新建一个 modules，然后下面新建一个 modulesA
在里面写点啥，然后导出去

	// A 模块
	export const modulesA = {
	state: {
	username: 'zs'
	}
	}

再 index.js 中导入 modulesA

	import {createStore} from 'vuex'
	import {modulesA} from './modules/modulesA'

	export default createStore({
	modules: {
	modulesA,
	}
	})

接着就可以开始使用了

	<template>
	<div class="container">
	// 使用 A 模块的 state 数据
	<p>{ this.$store.state.modulesA.username }</p>
	</div>
	</template>

# 开启命名空间

可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

	import {createStore} from 'vuex'
	import {modulesA} from './modules/modulesA'

	const modulesB = {
	// 开启命名空间
	namespaced: true,
	state: {
	username: '李昊'
	},
	getters: {
	newName(state) {
	return state.username + '！！！'
	}
	},
	mutations: {
	updateName(state) {
	state.username = '木子日天'
	}
	},
	actions: {
	updateName(context) {
	setTimeout(() => {
	context.commit('updateName')
	}, 1000);


	export default createStore({
	modules: {
	modulesA,
	modulesB,
	}
	})

# 使用方式

	<template>
	<div class="container">
	<!--使用B模块中的state数据-->
	<p>{ store.state.modulesB.username }</p>

	<!--使用B模块中的getters数据-->
	<p>{ store.getters["modulesB/newName"] }</p>

	<!--使用B模块中的Mutations更改数据-->
	<button @click="updateName">点击更改</button>

	<!--使用B模块中的actions延时更改数据-->
	<button @click="asyncChangeName">延时更改</button>
	</div>
	</template>

	<script>
	import {useStore} from "vuex";

	export default {
	name: 'App',
	setup() {
	const store = useStore()

	const updateName = () => {
	console.log('触发事件')
	store.commit("modulesB/updateName")
	}

	const asyncChangeName = () => {
	console.log('触发延时更改数据')
	store.dispatch('modulesB/updateName')
	}
	return {store, updateName, asyncChangeName}
	}
	}
	</script>

前端 Vue