置顶

Vue3学习与实战 · Vuex状态管理


字数:740 阅读时长:3分钟 阅读:85

VuexVue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vue3 Vuex

一、目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
demo/
package.json
vite.config.js
index.html
public/
src/
api/
assets/
common/
components/
store/
index.js
modules/
user.js
common.js
views/
index.vue
App.vue
main.js

二、版本依赖

vite: ^2.0.0
vue: ^3.2.8
vuex: ^4.0.0

三、配置Vuex

为了避免所有状态集中到一个对象或一个文件而变得臃肿,所以会按照不同的产品或业务线将状态树切割成多个 模块module),并配置各自的 命名空间namespaced),防止状态重复冲突。

  • 3-1.配置src/store/index.js文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
// src/store/index.js

import Vuex from 'vuex'

import User from './modules/user'
import Common from './modules/common'

export default new Vuex.Store({
modules: {
User,
Common,
}
})
  • 3-2.配置src/store/modules/user.js文件。
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// src/store/modules/user.js

import axios from 'axios'

const SET_USER_NAME = 'SET_USER_NAME'
const SET_RANDOM_IMG = 'SET_RANDOM_IMG'

export default {
namespaced: true,

state: {
username: 'Tom',
randomImg: 'https://images.dog.ceo/breeds/bulldog-french/n02108915_8258.jpg',
},

getters: {
getUsername (state) {
return state.username
},
getRandomImg (state) {
return state.randomImg
},
},

mutations: {
[SET_USER_NAME]: (state, username)=>{
state.username = username
},
[SET_RANDOM_IMG]: (state, randomImg)=>{
state.randomImg = randomImg
},
},

actions: {
async setUsername ({dispatch, commit, getters}, data) {
let username = getters.getUsername
return new Promise((resolve, reject) => {
setTimeout(()=>{
commit('GET_USER_NAME', data)
resolve(data)
}, 2000)
})
},
async setRandomImg ({dispatch, commit, getters}, data) {
// let randomImg = getters.getRandomImg
return new Promise((resolve, reject) => {
axios.get('https://dog.ceo/api/breeds/image/random').then((res) => {
let img = res.data.message
commit('SET_RANDOM_IMG', img)
resolve(img)
})
})
},
},
}
  • 3-3.在src/main.js入口文件中注册使用Vuex
1
2
3
4
5
6
7
8
9
10
11
12
13
// src/main.js

import { createApp } from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'

// ...

const app = createApp(App)

app.use(router).use(store);
app.mount('#app')

四、使用Vuex

  • 这里主要介绍一下在Vue3Composition API中的使用。
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// src/views/index.vue

<template>
<div>
<van-image
round
lazy-load
width="200"
height="200"
:src="img">
<template #loading>
<van-loading type="spinner" size="30" />
</template>
</van-image>

<br>

<van-button type="primary"
icon="search"
zise="mini"
text="随机dog"
:loading="loading"
@click="getImg"
color="linear-gradient(to right, #ff6034, #ee0a24)"
loading-text="loading..." />
</div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'

export default {
setup () {
const { state, getters, commit, dispatch } = useStore()
let img = computed(()=>getters['User/getRandomImg'])
let loading = ref(false)

const getImg = async () => {
loading.value = true
await dispatch('User/setRandomImg')
loading.value = false
}

return {
img,
loading,
getImg,
}
},
}
</script>

提示: 为了访问 stategetter,需要创建 computed 引用以保留响应性,这与在 Options API 中创建计算属性等效。


《Vue3学习与实战》系列


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2021-12-06
最后更新: 2021-12-28
本文标题: Vue3学习与实战 · Vuex状态管理
本文链接: https://www.tiven.cn/p/de821c2f/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^