uni-app中使用pinia

这篇具有很好参考价值的文章主要介绍了uni-app中使用pinia。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

Pinia 是什么?

uni-app 使用Pinia

main.js 中引用pinia

创建和注册模块

定义pinia方式

选项options方式 定义pinia

页面中使用 pinia选项options方式

函数方式 定义pinia

页面中使用 函数方式 定义的pinia


Pinia 是什么?

Pinia(发音为 /piːnjʌ/,如英语中的 peenya) 是 Vue 的存储库,它允许您跨组件、页面共享状态。

在服务器端以及小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:

  • Devtools 支持

    • 追踪 actions、mutations 的时间线

    • 在组件中展示它们所用到的 Store

    • 让调试更容易的 Time travel

  •  热模块更换

    • 不必重载页面即可修改 Store

    • 开发时可保持当前的 State

  • 为 JS 开发者提供适当的 TypeScript 支持以及 自动补全 功能。

uni-app中使用pinia,node_modules,pinia,uni-app,vue.js,前端,javascript

uni-app 使用Pinia

uni-app 内置了 Pinia 。Vue 2 项目暂不支持

使用 HBuilder X 不需要手动安装,直接使用即可。使用 CLI 需要手动安装,执行 yarn add pinia@2.0.33 或 npm install pinia@2.0.33

uni-app已经内置了vuex和pinia两个状态管理,不需要安装即可使用。

建议项目结构

├── pages
├── static
└── stores // 注意此处
    └── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

main.js 中引用pinia

mian.js 引用并使用pinia

//导入pinia
import * as Pinia from  'pinia'

// 创建Pinia实例  // 将pinia实例挂载到vue实例上 
app.use(Pinia.createPinia());

return {
    app,
    Pinia, // 此处必须将 Pinia 返回
} 

main.js完整代码

// #ifndef VUE3
import Vue from 'vue'
import App from './App' 

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'

//导入pinia  
import * as Pinia from  'pinia'

import App from './App.vue'
export function createApp() {
    const app = createSSRApp(App)

    // 创建Pinia实例  // 将pinia实例挂载到vue实例上 
    app.use(Pinia.createPinia());

    return {
        app,
        Pinia, // 此处必须将 Pinia 返回
    }
}
// #endif

请特别注意pinia引用位置,否则会报错

uni-app中使用pinia,node_modules,pinia,uni-app,vue.js,前端,javascript

创建和注册模块

在需要使用全局状态管理的地方,你可以创建一个或多个Pinia模块。每个模块代表一个具体的状态管理单元。

项目中,新建stores文件夹,用于存储 创建和注册的模块

uni-app中使用pinia,node_modules,pinia,uni-app,vue.js,前端,javascript

stores文件夹,新建js文件(useCounterStore.js),用于存储 创建和注册的模块

uni-app中使用pinia,node_modules,pinia,uni-app,vue.js,前端,javascript

定义pinia方式

选项options方式 定义pinia

useCounterStore.js中写入如下代码

import { defineStore } from 'pinia'

// 定义仓库有两种定义方式

// 01 选项options方式
export const useCounterStore = defineStore('counter', {
  // 定义状态
      state:()=>({count:5}),
      // 计算数据
      getters:{
          doubleCount:(state)=>state.count*2
      },
      // 动作支持异步
      actions:{
          setCount(v){
              this.count = v;
          }
      }
})

页面中使用 pinia选项options方式

<template>
    <view>
        pinia 大菠萝doubleCount:{{doubleCount}}
        <button>{{count}}</button>
    </view>
</template>

<script>
import {useCounterStore} from "@/stores/useCounterStore.js
// map方泛
import {mapState} from 'pinia';

export default {
    data(){},
    computed: function(){
        // 把pinia 的state映射到页面
        ...mapState(useCounterStore,["count","doubleCount"]
    } ,
    methods:{
        // 把pinia的方法映射到页面
        ...mapActions(useCounterStore,["setCount"])
    }
</script>

这种写法,和vuex很类似,但是少了mutation方法

函数方式 定义pinia

新建js文件(useColorStore.js),并且定义pinia

// 导入定义仓库的方法
import {defineStore} from 'pinia';

// 导入响应式和计算
import {ref} from 'vue'
const  useColorStore = defineStore("color",()=>{
    // 定义一个状态颜色为 默认红色
    const color=ref('red');
    // 定义一个设置状态的方法
    const setColor = v=>{
        color.value = v;
    }
    // 导入
    return {color,setColor}
}) 

export default useColorStore;          

页面中使用 函数方式 定义的pinia

<template>
    <view class="container">
        <button @click="setColor">更改颜色</button> 
        
        <view :style="'background:'+colorStore.color">
            v-show="isShow"
        </view>
    </view>
</template>

<script setup>
    import useColorStore from '@/stores/useColorStore.js'
    const colorStore = useColorStore() 
    const setColor = () => { 
        colorStore.setColor('#333')
    }  
</script> 

<style lang="less" scoped> 
    .container {
        padding: 0 20px 20px;
        font-size: 14px;
        line-height: 24px;
    }
</style>

误区

uni-app中使用pinia,node_modules,pinia,uni-app,vue.js,前端,javascript

参考文档

  • 状态管理 Pinia | uni-app官网文章来源地址https://www.toymoban.com/news/detail-649503.html

到了这里,关于uni-app中使用pinia的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app学习小记--问题1-Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-

    问题描述: Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js): 问题原因: 代码中存在语法错误,譬如说多了某个符号,或者引用的双引号中置空等; 解决方法: v-model中不可以置空,此问题首先定位问题页面,其次检查语法;  

    2024年04月25日
    浏览(91)
  • uni-app报错:Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/

    碰到这种报错不要慌,一支烟,一杯茶,一个报错找一天,哈哈哈哈,好了,不开玩笑了,原因有以下几种: 1、v-model   绑定的空字符串 2、父传子,传的属性值为空 3、渲染字段为空 4、标签少了闭合标签   希望对大家有所帮助,加油,前端代码搬运工!

    2024年02月17日
    浏览(53)
  • 小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用

    一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后,项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件,使用组件 八、经过测试,成功。 参考链接 http://lihuaxi.xjx100.cn/new

    2024年02月12日
    浏览(52)
  • 【uni-app】uni-app中scroll-into-view的使用

    在使用的时候需要注意: 需要给sroll-view组件设置宽或者高(根据横纵情况) white-space:nowrap 这行代码让组件能够滑动(之前自己写的时候踩的坑) 使用 scroll-into-view ,需要开启动画效果,并且动态绑定的值必须是字符串 并且子组件的上绑定一个id值用于定位 以上就是今天要讲的内容,

    2024年02月11日
    浏览(46)
  • Uni-app组件使用

    组件是 视图层的基本组成单元 。是一个单独且 可复用的功能模块的封装 。 组件名称是由尖括号包裹的,可以看成一个语义化标签,是有开始标签和结束标签的。 如下举个简单的例子: uni-card  //这是开始标签 text 这是一个基础卡片示例,内容较少,此示例展示了一个没有任

    2024年02月09日
    浏览(52)
  • uni-app如何使用组件

    使用组件是uni-app的常见操作之一。以下是使用组件的步骤: 在uni-app项目中创建组件。 可以通过在components文件夹中创建一个.vue文件来创建组件。 也可以通过在HBuilderX中使用模板或向导来创建组件。 在需要使用组件的页面或组件中引入组件。 可以使用import导入组件,例如:

    2024年02月13日
    浏览(44)
  • uni-app使用websocket

    原文链接:https://blog.csdn.net/weixin_43343144/article/details/92998467

    2024年02月07日
    浏览(42)
  • uni-app--》如何制作一个APP并使用?

    🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:uni-app 🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。 👀引言         ⚓经过web前端的学习,相信大家对于前端开发有了一定深入的

    2023年04月09日
    浏览(43)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(91)
  • uni-app——使用uni.navigateTo传递对象参数

    文章目录 一、 传递一般参数 二、 传递对象参数 1. 传递参数 2. 接收参数 navigateTo进行页面传递参数,在下一个页面接收数据,一般在在onLoad钩子函数中获取

    2024年02月13日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包