前言：

? ? ? ? 我們在vue2的時候常用的狀態管理工具就是vuex，vue3開發以后，又多了一個pinia的選項，相對更輕便，但是vuex也用的非常多的，這里簡單說下在uni-app中vuex的使用。

實現步驟：

1、安裝：

npm install vuex@next --save
# 或
yarn add vuex@next

2、創建我們的store文件夾與下面的index.js

因為項目中一般不用一個文件，這里用了一個user.js來表示子級

src/
├── store/
│   ├── index.js          # 主入口文件
│   ├── modules/          # 模塊目錄
│   │   ├── user.js       # 用戶模塊

3、index.js

import { createStore } from 'vuex'
import user from './modules/user'export default createStore({modules: {user,},state: {appName: '項目1'},mutations: {SET_AppName(state, data) {state.appName = data}},actions: {async changAppName({ commit }, query) {commit('SET_AppName', '新項目名稱')}},getters: {appTitle: state => state.appName,}
})

4、modules/user.js

export default {//當多模塊整合時，actions和mutations會整合為數組，//但是getters不會，它是唯一的，不會整合，//所以為了getters正常使用的同時每個模塊具有獨立性和可復用namespaced: true,state: () => ({token: '',}),mutations: {SET_TOKEN(state, token) {state.token = token}},actions: {async login({ commit }, credentials) {// const res = await uni.request({//   url: '/api/login',//   method: 'POST',//   data: credentials// })// commit('SET_TOKEN', res.data.token)commit('SET_TOKEN', '1111')}},getters: {userToken: state => state.token}
}

5、具體頁面的使用

<template>------------------vuex內容：<view>{{appName}}</view><view>{{appTitle}}</view>------<view>{{token}}</view><view>{{userToken}}</view>
</template>

<script setup>//index.js中定義的變量
const appName = computed(() => store.state.appName)
const appTitle = computed(() => store.getters.appTitle)//user.js中定義的變量
const token = computed(() => store.state.user.token)
const userToken = computed(() => store.getters['user/userToken'])// index.js中定義的方法
store.dispatch('changAppName', {})
store.commit('SET_AppName', 'Alice')// user.js中定義的方法
store.dispatch('user/login', {})
store.commit('user/SET_TOKEN','3333')