当前位置：首页 > news >正文

uniapp+vue3开发项目之引入vuex状态管理工具

news 来源：原创 2025/5/14 11:41:07

前言：

我们在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')