Vue3.0学习 - 第十八节，vue3中如何使用 vuex

不念不忘少年蓝@ 2022-10-09 03:23 4阅读 0赞

在vue2中使用vuex我们都很清楚，

## 在vue3中如何使用vuex v4.x ##

### 1、在src下创建store ###

![20210623171150166.png][]

### 2、在store下创建 modules/userStore.js   ###

Vuex 允许我们将 store 分割成**模块（module）**。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

//userStore.js
    
    //引入api 请求数据
    import { userDetailInfos } from "../../api/user"
    export default {
        state: () => ({
            userStoreState: "测试store",
            userInfos: ""
        }),
        getters: {
            gettersUserInfos(state) {
                if (!state.userInfos) {
                    let userInfo = localStorage.getItem("userInfos")
                    if (userInfo && userInfo != "null") {
                        userInfo = JSON.parse(userInfo)
                    }
                    state.userInfos = userInfo
                }
                return state.userInfos
            }
        },
        mutations: {
            setUserInfos(state, users) {
                state.userInfos = users
                localStorage.setItem("userInfos", JSON.stringify(users))
            }
        },
        //异步方法 Action 可以包含任意异步操作
        actions: {
            async getUserInfos({ commit }, data) {
                await userDetailInfos().then((res) => {
                    if (res.code == 0) {
                        commit("setUserInfos", res.data)
                    }
                });
            }
        },
    
    }

###  3、在store/index.js中引入modules/userStore.js ###

import { createStore } from 'vuex'
    import userStore from "./modules/userStore"
    
    export default createStore({
      modules: {
        userStore
      }
    })

### 4、在组件中使用 ###

**4.1、在组件1中使用，触发store的actions里的方法**

**4.2、在组件2中使用，获取store中的数据 **

Getter 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值

home.vue

> [vuex官方文档][vuex]

[20210623171150166.png]: /images/20221005/504beca9fb584c1a947dc8373b8a9bb2.png
[vuex]: https://next.vuex.vuejs.org/zh/guide/getters.html