关于uniapp vuex store的使用心得

最新推荐文章于 2024-04-25 09:50:43 发布
原创 最新推荐文章于 2024-04-25 09:50:43 发布 · 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心得体会
Apooppp的博客
06-21 418
uni-app支持通过 可视化界面、两种方式快速创建项目。可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。
uniapp网易云音乐小程序
最新发布
10-14
嗯，用户想查找使用uniapp开发网易云音乐小程序相关的教程、代码和案例。我先梳理一下站内提供的三个引用内容：引用1提到ghostdp的neteaseMusic-uniApp项目，这是个开源实现；引用2是微信小程序的系列教程，包含uni-...
《uni-app跨平台开发与应用》一课一得
baiyixiangxiaoho的博客
04-25 2271
uni-app是一个基于Vue.js的跨平台应用开发框架，它允许开发者使用Vue.js语法进行一次编码，然后将代码编译成可以运行在多个平台上的原生应用，包括iOS、Android、Web等。uni-app提供了丰富的组件和API，使开发者可以轻松地创建高性能、原生体验的应用，并且具有良好的开发效率和跨平台兼容性。通过uni-app，开发者可以大大减少开发成本和时间，快速推出产品，适应不同平台的需求。使用view组件构建页面的整体结构，包括音乐头部、轮播图、排行榜、用户信息等模块。
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 使用心得体会
m0_72547194的博客
06-27 162
虽然可能一些原生可以实现的功能 uni-app 实现不了，不过整体开发下来还行，很多的坑还是因为多端不兼容，除了写起来麻烦一点，基本上都还是有可以解决的策略。比之前用 Weex 写 APP 开发体验好一点，比 React Native 的编译鸡肋一点（这点体验不是很好），至于 Flutter 还没有试过，有机会的话会试一下。例如动态的 Class 与 Style 绑定，在 H5 能用，APP 和小程序的体现就不一样。如果看过其他小程序的文档，可以发现，文档主要的三大章节就体现在。
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
10-16
主要介绍了uni-app微信小程序登录并使用vuex存储登录态的思路，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
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 - store（仓库） - getter
weixin_43860608的博客
10-19 1971
【摘自官网】 Getter 可以认为是 store 的计算属性，对 state 的加工，是派生出来的数据。 就像 computed 计算属性一样，getter 返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。 根目录 - store目录 - index.js 在 store 上注册 getter，getter 方法接受以下参数： state, 如果在模块中定义则为模块的局部状态 getters, 等同于 sto
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 进行全局状态管理了。希望对你有所帮助！如果有任何疑问，请随时提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值