欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > uniapp+vue3开发项目之引入vuex状态管理工具

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

2025/5/18 22:02:05 来源:https://blog.csdn.net/qq_41619796/article/details/147926714  浏览:    关键词:uniapp+vue3开发项目之引入vuex状态管理工具

前言:

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词