uni-app - 配置 Vuex 状态管理（在 uni-app 项目中使用 Vuex 状态管理）

系统管理员 2022-12-28 11:27 539阅读 0赞

## 前言 ##

> uni-app 内置了 `Vuex` 状态管理，我们只需要配置好便可使用。

配置 `Vuex` 很简单，只需要以下几步操作便可使用。

## 一、第一步 ##

在项目最外层新建 `store` 文件夹，并在该文件夹下新建一个 `index.js` 文件，写入以下代码。  
![在这里插入图片描述][20201216220048469.png]

// store/index.js
    
    
    import Vue from 'vue'
    import Vuex from 'vuex'
     
    Vue.use(Vuex);
    
    const store = new Vuex.Store({ 
    	
     state : { 
      nickname : "Vuex数据"
     },
     
     mutations : { },
     
     // ...
     
    });
    
    export default store

## 二、第二步 ##

打开 `main.js` 文件（将 `store` 挂载到 `Vue` 实例上），写入以下代码。

// main.js
    
    // 引入store
    import store from './store'
    
    // 挂载到Vue实例
    Vue.prototype.$store = store;
    
    // 在app上挂载
    const app = new Vue({ 
        ...App,
        store //挂载
    })

配置好的话（都在 `main.js` 文件里）大概如下图所示：  
![在这里插入图片描述][20201216220651724.png]  
![在这里插入图片描述][20201216220711872.png]

## 三、第三步 ##

以上全部配置完毕，就可以在 `pages` 页面中直接以 `this.$store` 使用了。

onLoad()
    { 
    	// 打印刚才定义的全局数据
    	console.log(this.$store.state.nickname) //Vuex数据
    }

[20201216220048469.png]: /images/20221120/9efc8a6c2075415793f34d391464af53.png
[20201216220651724.png]: /images/20221120/d10f8d1dbfba4d048467b918393bb13b.png
[20201216220711872.png]: /images/20221120/5e587b4238614680bb33b564a613f692.png

发表评论取消回复

表情：

评论列表（有 0 条评论，539人围观）

还没有评论，来说两句吧...

相关阅读

相关状态管理VueX

Vuex是一个专为Vue.js应用程序开发的状态管理模式；它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex可以管理复杂...

逃离我推掉我的手/ 2024年05月23日 18:58/ 0 赞/ 111 阅读

相关 UNIAPP实战项目笔记31 使用Vuex状态机管理购物车状态

UNIAPP实战项目笔记31 使用Vuex状态机管理购物车状态核心代码 main.js 中添加引入状态机并挂载 import App from '

青旅半醒/ 2024年04月01日 12:27/ 0 赞/ 102 阅读

相关 uni-app - 配置 Vuex 状态管理（在 uni-app 项目中使用 Vuex 状态管理）

前言 > uni-app 内置了 `Vuex` 状态管理，我们只需要配置好便可使用。配置 `Vuex` 很简单，只需要以下几步操作便可使用。一、第一步在项

系统管理员/ 2022年12月28日 11:27/ 0 赞/ 540 阅读

相关 Vuex（状态管理模式）

Vuex：状态管理模式，它采用集中式存储管理应用的所有组件的状态，应用于多级或者多个界面共享，如登录状态，用户名，头像，地理位置，收藏，购物车等项目结构 1> 应用

你的名字/ 2022年12月27日 01:13/ 0 赞/ 233 阅读

相关 uniapp Vuex 状态管理模式基本使用

一、uniapp 引入定义挂载Vuex 1、在根目录下建立store目录创建index.js文件 ![创建store目录][store] 代码如下 i

绝地灬酷狼/ 2022年12月12日 13:44/ 0 赞/ 471 阅读

相关 vuex状态管理

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人文章目录一、vuex是什么? 二、状态管理

一时失言乱红尘/ 2022年12月03日 08:56/ 0 赞/ 277 阅读

相关 vuex 状态管理

一、vuex状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发

小鱼儿/ 2022年12月02日 01:05/ 0 赞/ 323 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

朴灿烈づ我的快乐病毒、/ 2022年11月19日 11:28/ 0 赞/ 256 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

悠悠/ 2022年11月19日 11:27/ 0 赞/ 305 阅读

相关 Vuex状态管理总结

一、什么是 Vuex 1、Vuex 是一个专为 Vue.js 应用程序开发的[状态管理模式][Link 1] 2、Vuex 采用集中式存储和管理应用中所有组件的状态

﹏ヽ暗。殇╰゛Y/ 2021年11月05日 12:56/ 0 赞/ 484 阅读