状态管理Vuex

掌握Vuex实现全局状态管理的方式
目录：

1. 问题
2. Vuex 工作流程
3. 下载
4. 创建 Store
5. state
6. getters
7. mutations
8. actions
9. module

问题

在不使用全局状态管理库时 应用状态组件管理 当多个组件需要共享使用同一个应用状态时 通过props 自定义事件在组件之间进行传递 在组件和组件之间的关系比较疏远时 使得应用的维护变的困难

在使用了全局状态管理库后 需要共享的应用状态被单独保存在一个独立组件的Store对象中 所有组件可以直接从这个对象中获取状态 省去了繁琐的组件状态传递过程 而且当 Store 中的状态发生变化后 组件会自动更新

Vuex 工作流程

1. State：用保存应用状态（store.state）
2. Action：用执行异步操作 不能在此处直接修改状态（dispatch）
3. Mutation：用执行同步操作 修改state中的存储的应用状态（commit）
4. Getter：vuex中的计算属性（store.getters）
5. Module：模块 用对状态进行拆分

在组件开发者可以通过 dispatch 调用 Action 类型的方法执行异步操作 当异步操作执行完成后 在Action 方法中可以通过 commit 调用 mutation 类型的方法修改状态 当状态被修改后 视图更新

下载

Vuex 目前有两个版本 一个是3.6.2 另一个是 4.0.4 3.X的版本是供Vue2使用的 4.X 版本是供 Vue3使用的

创建 Store

在 src 下的 store 创建一个 index.js 文件

import {createStore} from "vuex"
export default createStore({})
1
2

在 src 下的 main.js 文件

import store from "./store"
const app = createApp(App)
app.use(store)
1
2
3

state

在应用状态对象中存储 username 状态

import {createStore} from "vuex"
export default createStore({
	state: {
		username: "张三"
	}
})
1
2
3
4
5
6

在组件获取 username 状态

<template>
	{{$store.state.username}}
</template>
<script>
import {useStore} from "vuex"
export default {
	setup () {
		const store = userStore()
		console.log(store.state.username)
	}
}	
</script>
1
2
3
4
5
6
7
8
9
10
11
12

getters

是vuex 中的计算属性 基于现有状态计算出新的状态

import {createStore} from "vuex"
export default createStore({
	getters: {
		newUsername(state) {
			return state.username + "小明"
		}
	}
})
1
2
3
4
5
6
7
8

<template>
	{{$store.getters.newUsername}}
</template>
<script>
export default () {
	setup () {
		console.log(store.getters.newUsername)
	}
}
</script>
1
2
3
4
5
6
7
8
9
10

mutations

是vuex 中用修改状态的方法

import {createStore} from "vuex"
export default createStore({
	mutations: {
		updateUsername(state, username) {
			state.username = username
		}
	}
})
1
2
3
4
5
6
7
8

<template>
	<button @click="$store.commit("updateUsername", "李四")">
		change username
	</button>
</template>
1
2
3
4
5

actions

在vuex 中 执行异步操作 当异步操作执行完成以后 可以通过commit 调用 mutation 方法来修改应用状态

import {createStore} from "vuex"
export default createStore({
	actions: {
		updateName(ctx) {
			setTimeout(() => {
				ctx.commit("updateName", "李四")
			}， 1000)
		}
	}
})
1
2
3
4
5
6
7
8
9
10

<template>
	<button @click="onClickHandler">button</button>
</template>
<script>
export default {
	setup () {
		const onClickHandler = () => {
			store.dispatch("updateName")
		}
		return {onClickHandler}
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

module

描述：
Vuex 允许开发者通过模块对状态进行拆分 允许开发者把不同状态代码拆分到不同的模块中
命名空间模块需要在模块对象中添加 namespaced：true选择

import {createStore} from "vuex"
const moduleA = {
	namespaced: true,
	state() {
		return {name: "模块A"}
	}
}
const modlueB = {
	namespaced: true,
	state () {
		return {name: "模块B"}
	}
}

export default createStore ({
	modules: {
		a: moduleA,
		b: moduleB
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<template>
  {{$store.state['a'].name}}
  {{$store.state['b'].name}}
</template>
1
2
3
4

import { createStore } from 'vuex'
const moduleA = {
  namespaced: true,
  getters: {
    newName (state) {
      return state.name + '😀'
    }
  }
}
const moduleB = {
  namespaced: true,
  getters: {
    newName (state) {
      return state.name + '😀'
    }
  }
}

export default createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  {{$store.getters['a/newName']}}
  {{$store.getters['b/newName']}}
</template>
1
2
3
4

import { createStore } from 'vuex'

const moduleA = {
  namespaced: true,
  mutations: {
    updateName (state) {
      state.name = '我是模块A'
    }
  }
}
const moduleB = {
  namespaced: true,
  mutations: {
    updateName (state) {
      state.name = '我是模块B'
    }
  }
}

export default createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<template>
  {{$store.getters['a/newName']}}
  {{$store.getters['b/newName']}}
  <button @click="$store.commit('a/updateName')">update moduleA</button>
  <button @click="$store.commit('b/updateName')">update moduleb</button>
</template>
1
2
3
4
5
6