关于uniapp vuex store的使用心得

最新推荐文章于 2025-04-16 19:39:33 发布
原创 最新推荐文章于 2025-04-16 19:39:33 发布 · 935 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文分享了如何在uniapp小程序中正确使用全局store进行状态管理，包括登录触发状态更新、错误调用方式的分析，以及如何确保组件的重新渲染。通过实例对比和大佬建议，探讨了首次空值显示和后续数据获取的问题。

今天写了一个全局store,这是在uniapp里写的，不过vue的也差不多，看文档怎么测试都不对，经过一下午终于能理解一点了，不说了，直接上代码了
这是我的store.js随便找个文件放了，记住引用的时候路径对就行了
在这里插入图片描述
main.js 里引用
在这里插入图片描述
这里相信大部分都会，主要是下面 调用
这里我是登录才更新状态的
在这里插入图片描述
而且 也 会提交Mutation
在这里插入图片描述
你会发现他会请求一次接口，同时改变store.js的state对象里面的userInfo值
我先来个错误的调用方式，当你这样写的时候
在这里插入图片描述
我的发现是错的
在这里插入图片描述
而且你会发现明显是有数据的
在这里插入图片描述
在这里插入图片描述
我的是这样的使用的
在这里插入图片描述
在这里插入图片描述
这样就可以显示出来，
问了大佬 ，大佬说是 第一次为空第二次获取到了但是没有重新渲染，不过我另一个朋友this.$store.state.userInfo.nickname这样渲染 也是可以渲染的，搞不懂，他的是uniapp H5 我的是uniapp 小程序的，有懂的大佬也可以告诉我一下，不胜感激

uniapp 如何使用vuex store (亲测)
Little_Code的博客
11-12 973
首次使用vuex中的store
uni-app-使用状态管理Vuex
m0_48259951的博客
03-29 761
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。，不需要去安装，直接导入使用。目录，在此目录下新建。
uniapp获取当前的地理位置
Smile_ping的博客
09-11 5632
uniapp获取当前地理位置及相关逻辑交互
uniapp vuex store
lucky_hahaha的博客
11-10 1498
由于uni-app已经内置了vuex，所以只要正确引入就可以了。 在项目的根目录下，创建一个名为store的文件夹然后在该文件夹下创建一个index.js的js文件。 在该js文件下定义公共的数据以及方法函数，并且把它导出。 // vuex store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { //全局数据 userName:'', .
uni-app 框架中使用 vuex（store）
weixin_45559449的博客
09-22 1788
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。，不需要额外安装。
uniapp-商城-27-vuex 使用流程
weixin_43613170的博客
04-16 1299
为了能在所有的页面都实现状态管理，我们按照前面讲的页面进行状态获取，然后再进行页面设置和布局，那就是重复工作，vuex 就会解决这样的问题，如同类、高度提炼的接口来帮助我们实现这些重复工作的管理。避免一直在造一样的轮子。其实以后用vuex 比较少 但是vue2 上还是用的多，以后vue3或者4 都是用的Pinia。上面是vuex的官网。这样的方案到处都是。
uniapp中vuex的应用
qq_51741194的博客
05-03 8666
前言 提示：这里可以添加本文要记录的大概内容： 记录一下今日学习应用uniapp中的vuex 提示：以下是本篇文章正文内容，下面案例可供参考 一、vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 按照自己理解来说就是公共数据管理模块。如果应用中数据量比较大的可以应用，不是很大的建议用缓存即可。 二、使用步骤 使用准备在项目中新建store目录，在该目录下新建index.js文件 1
uniapp-商城-28-vuex 通用方法
最新发布
weixin_43613170的博客
04-16 588
上节说了vuex 的基本使用方法，分析了基本的使用方法。在使用中，常见使用，我们要针对状态，购物车，不同类事务的管理，如果按照上节课的通用方法，那么使用和维护是会很大的难度的。所以这里就必须要进行处理，借助 modules 进行定义不同类事务的处理手段。便于后期维护和使用。
uniapp中使用vuex
weixin_42342065的博客
06-05 2274
前言:在用uniapp写移动端的时候使用了vuex，在此记录下 1.在项目中新建目录store,在store中新建store.js 2.在store.js中调用接口给变量赋值 store.js具体代码: import Vue from 'vue' import Vuex from 'vuex' import request from '@/js/request.js' Vue.use(Vuex) const store = new Vuex.Store({ state: { myStyle: {
uni-app中vuex，store的使用
hu104160112的博客
05-26 1739
首先在根目录下创建store目录在里面创建index.js index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {}, mutations: {}, actions: {} }) export default store main.js中挂载vuex import Vue from 'vue' import App fr
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
10-16
主要介绍了uni-app微信小程序登录并使用vuex存储登录态的思路，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
uni-app 使用心得体会
m0_72547194的博客
06-27 162
虽然可能一些原生可以实现的功能 uni-app 实现不了，不过整体开发下来还行，很多的坑还是因为多端不兼容，除了写起来麻烦一点，基本上都还是有可以解决的策略。比之前用 Weex 写 APP 开发体验好一点，比 React Native 的编译鸡肋一点（这点体验不是很好），至于 Flutter 还没有试过，有机会的话会试一下。例如动态的 Class 与 Style 绑定，在 H5 能用，APP 和小程序的体现就不一样。如果看过其他小程序的文档，可以发现，文档主要的三大章节就体现在。
uni-app学习笔记之vuex store状态管理
紫微斗数象法奥义ZWDStudy
02-25 1346
介绍 Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 uni-app 内置了 Vuex 。 但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏 我们把组件的共享状态抽取出来，以一个 全局单例模式管理 这就是vuex的产生 通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。这就是 Vuex 背后的基本
Uniapp中vuex的使用
专注微信小程序
08-27 6070
vuex的学习笔记，很多地方还都不是很懂，先记下来再说，比小程序里自带的store复杂很多，看着头大，而且方法里面很多ES6的内容，头都看到爆炸。
uniapp的实践总结
zzjbj910的博客
06-05 455
在小程序里，其实小于40k的文件在css里也无法引用，uni-app编译器在编译时自动做了处理，把小于40k的文件编译为base64方式。每个可显示的页面，都必须在 pages.json 中注册。app和小程序中，为了提升体验，页面提供了原生的导航栏和底部tabbar，注意这些配置是在pages.json中做，而不是在vue页面里创建，但点击事件的监听在显示的vue页面中做。在uni-app的各个端中，除了h5端，其他端的js都运行在一个独立的v8引擎下，不是在浏览器中，所以浏览器的对象无法使用。
uni-App学习心得与收获
qq_63851758的博客
06-19 139
在跟着学习完uni-app基础内容和项目制作，在这里书写一份关于这个项目的学习过程与心得体会购物车是一个很常见的应用场景，而在手机设备上的购物车功能的实现，则需要考虑到很多方面。购物车的用户体验和操作的优化是非常重要的。在我的UniAPP购物车项目中，还任然需要如何减少界面和数据的重复渲染，减少不必要的请求，以及优化组件和插件的使用，优化代码界面。总之，在UniAPP购物车项目中，需要全面地考虑到布局设计、数据处理、用户体验和操作优化、性能优化等问题，以实现一个强大且优秀的购物车应用。
uni-app 配置Vuex Store
Novice-XiaoSong的博客
05-24 1750
在uni-app中使用Vuex实现页面间的数据共享 在项目目录下新建Store/index.js Store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{ data1: null, data2: [] }, mutations:{ updateData(state, _new){ this.state.
uniapp - Vuex - store（仓库） - state
weixin_43860608的博客
10-19 1624
【摘自官网】Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。集中式存储管理应用的所有组件的状态。 核心概念： 每一个 Vuex 应用的核心就是 store（仓库），状态管理有5个核心：state，getter，mutation，action，module。 这篇文章整理记录一下，怎么使用store。 根目录 - 新建store目录 - 新建index.js文件<!-- 页面路径：store/index.js --> import Vue from 'vue' import Vu
uni-app的基本使用学习笔记（简记）
m0_66148802的博客
03-10 1002
主要讲解学习uni-app的基本使用，详细文档还需要看uni-app官网。
uniapp vuex使用
08-17
在 Uniapp 中使用 Vuex，可以实现全局状态管理。下面是一个简单的示例，介绍如何在 Uniapp 中使用 Vuex。 1. 首先，在你的项目中安装 Vuex： ```bash npm install vuex ``` 2. 在你的项目中创建一个 `store` 目录，用于存放 Vuex 相关的文件。 3. 在 `store` 目录下创建一个 `index.js` 文件，用于配置 Vuex 的核心内容。 ```javascript // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ }, decrement(state) { state.count-- } }, actions: { increment(context) { context.commit('increment') }, decrement(context) { context.commit('decrement') } }, getters: { getCount(state) { return state.count } } }) export default store ``` 在上述代码中，我们定义了一个包含 `state`、`mutations`、`actions` 和 `getters` 的 Vuex store。`state` 用于存储应用的状态，`mutations` 用于修改状态，`actions` 用于提交 mutations，`getters` 用于获取状态。 4. 在主入口文件 `main.js` 中导入并挂载 Vuex store： ```javascript // main.js import Vue from 'vue' import App from './App' import store from './store' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ store, ...App }) app.$mount() ``` 在上述代码中，我们将创建的 Vuex store 对象导入并挂载到 Vue 实例上，这样就可以在整个应用中共享该 store 中定义的状态和方法。 5. 现在，你可以在组件中使用 Vuex 了。例如，在一个组件中获取和修改状态： ```vue <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> <script> export default { computed: { count() { return this.$store.getters.getCount } }, methods: { increment() { this.$store.dispatch('increment') }, decrement() { this.$store.dispatch('decrement') } } } </script> ``` 在上述代码中，我们通过 `$store` 访问 Vuex store 对象，使用 `getters` 获取状态，使用 `dispatch` 提交 actions。 这样，你就可以在 Uniapp 中使用 Vuex 进行全局状态管理了。希望对你有所帮助！如果有任何疑问，请随时提出。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值