首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >(十五)OptionsApi 创建 Pinia

(十五)OptionsApi 创建 Pinia

作者头像
老怪兽
发布于 2023-02-22 07:48:01
发布于 2023-02-22 07:48:01
28400
代码可运行
举报
运行总次数:0
代码可运行

一、OptionsApi 创建 Pinia

说明

  • 其实 optionsApi 配置 piniavuex 是一样的,如果已经会配置 vuex 了,那么 piniaoptionsApi 也已经会了
  • 需要注意的是,当使用 optionsApi 配置的时候,defineStore 的第二个参数是一个 对象
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { defineStore } from 'pinia'

export default useNoteStore = defineStore('note', {
    state() {
        return {
            noteList: [
                {
                    title: '标题',
                    desc: '详情'
                }
            ],

            seachText: ''
        }
    },

    getters: {
        // 普通的方法
    },

    actions: {
        // 逻辑处理
    }
})

二、使用箭头函数的形式

  • 如果使用箭头函数的话,就不能通过 this 来访问上面的状态,此时箭头函数接收一个,state 作为参数,通过这个参数来访问 state 的值
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
getters: {
    searchNotes: (state) => {
    // 如果搜索框为 空 就展示所有 noteList
    if(state.searchText === '') {
        return state.noteList
    } else {
        return state.noteList.filter(note => {
            return state.noteList.title.includes(state.searchText)
        })
    }
}
}

三、使用普通函数的形式

  • 如果使用普通函数的形式的话就可以使用 this 来访问了
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
getters: {
    searchNotes() {
        // 如果搜索框为 空 就展示所有 noteList
        if(this.searchText === '') {
            return this.noteList
        } else {
            return this.noteList.filter(note => {
                return this.noteList.title.includes(this.searchText)
            })
        }
    }
}

四、获取其他 state

  • 获取其他 state 不能放在 defineStore 外面获取, 只能在单个方法里面获取,获取的方法如下
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { useUserStore } from '@/store/user.js'

actions: {
    addNote(title, desc) {
        cosnt userStore = useUserStore()

        if(userStore.isLoggedIn) {
            // ...
        } else {
            // ...
        }
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年11月28日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
(十二)store 之间互相访问
一、store 之间互相访问 note.js import { ref } from 'vue' import { defineStore } from 'pinia' export const useNoteStore = defineStore('note', () => { cosnt noteList = ref([ { title: '标题', desc: '详情内容' } ]), ret
老怪兽
2023/02/22
6080
(九)使用 Actions 来修改状态
一、使用 Actions 修改状态 说明 为什么需要 actions 呢,我们明明可以在组件中直接修改 store 里面的数据 原因就是他和 getters 是一样的,为了复用,同样的逻辑只用触发 actions 就可以修改了 二、如何在 pinia 定义 actions store.js import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useNoteStore = defineS
老怪兽
2023/02/22
3290
(十)使用 Actions 异步修改状态
一、使用 Actions 异步修改状态 store.js 异步的先清空搜索框在异步的添加数据 import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useNoteStore = defineStore('note', () => { const noteList = ref([ { title: '标题1', desc
老怪兽
2023/02/22
3960
Pinia入门-实现简单的用户状态管理
在整个应用程序中访问的数据(且不需要被持久化),例如导航栏中显示的用户信息,以及需要通过页面保留的数据,例如一个非常复杂的多步骤表格。
luciozhang
2023/04/22
8080
(八)使用 $patch 同时修改多个状态
一、使用 $patch 同时修改多个状态 store.js import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useNoteStore = defineStore('note', () => { const noteList = ref([ { title: '标题1', desc: '详情内容1'
老怪兽
2023/02/22
7200
Vue 框架学习系列六:Pinia 进阶用法与最佳实践
在前面的文章中,我们介绍了 Pinia 的基本概念和如何在 Vue 3 应用中使用它。现在,我们将深入探讨 Pinia 的一些进阶用法和最佳实践,以帮助你更高效地管理应用状态。
china马斯克
2024/10/05
6430
(十四)与 TypeScript 集成
因为 pinia 与 TypeScript 集成的很好了,所以在 pinia 里面用到 TypeScript 的地方很少,就是定义数据的时候,如果不指定使用的时候就判断不出来是什么类型
老怪兽
2023/02/22
3650
VUE最新状态管理工具
在VUE项目开发中,一些数据常常被多个组件频繁使用,为了管理和维护这些数据,就出现了状态管理模式。
程序视点
2025/01/19
1410
VUE最新状态管理工具
(六)在组件中直接修改状态
一、在组件中直接修改状态 说明 pinia 允许我们直接修改 store 里面的 state,不像 vuex 必须通过 mutations 才可以修改 因为我们定义的时候是使用 ref 来定义的他本身就是一个响应式数据,所以可以直接修改 store.js import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useNoteStore = defineStore('note', () => {
老怪兽
2023/02/22
4000
一杯茶的时间入门Vue新的状态管理库Pinia
Pinia 是 Vue.js 官方推荐的新一代状态管理库,它提供了非常简洁和直观的 API,可以极大地提高我们管理应用状态的效率。本文将深入介绍 Pinia 的各种高级用法,内容涵盖:
linwu
2023/08/08
4840
一杯茶的时间入门Vue新的状态管理库Pinia
【Vue工程】006-Pinia
https://stackblitz.com/github/piniajs/example-vue-3-vite?file=README.md
訾博ZiBo
2025/01/06
2220
(七)Getters/computed 计算状态
一、定义 Getters/computed 计算状态 说明 getters 课以对一些状态进行一些复杂的逻辑计算,然后在各个组件中进行复用 做一个过滤的功能来看一下 getters 是怎么使用的 import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useNoteStore = defineStore('note', () => { const noteList = ref([
老怪兽
2023/02/22
1980
pinia基本使用介绍
比如开始的时候我们可以使用缓存进行同步数据,虽然很low但是它确实属于一种方案,但是这种方案的实时性很差,也就是很难做到信息的及时同步,虽然你可以写很多监听来达到一个同步的效果,但是代码维护起来就会很笨重
何处锦绣不灰堆
2022/09/21
9310
一起吹过的晚风就算相拥 — Vue Admin Work 与 Pinia的邂逅相拥---Pinia实战篇
了解过Vue Admin Work 中后台系列框架的小伙伴们都应该知道,在VueAdminWork中我状态管理我们一直是采用的 Vuex 这个经典框架 。Vuex 确实功能很强大,而且也很稳定,我在多个项目中都使用这个框架做状态管理。
用户9078190
2022/10/28
2720
Vue3中使用Pinia详解
Pinia是一个专门为Vue.js设计的状态管理库,它提供了一种简单和直观的方式来管理应用程序的状态。在使用Pinia时,可以轻松地创建定义状态的存储,然后将其与Vue组件绑定,使它们能够使用该状态。和上一个博客提到的Vuex相比,Pinia 更加简单易用,体积更小,同时具有更好的 TypeScript 支持和插件系统。
九仞山
2023/10/14
1.1K0
Pinia 入门:零基础开启 Vue 状态管理之旅
在现代 Vue 应用开发中,高效的状态管理是构建强大、可维护应用的关键。Pinia 作为一种新兴的状态管理方案,为 Vue 开发者带来了全新的体验。本文将带你从零开始,深入了解 Pinia 的基础知识,开启 Vue 状态管理的精彩之旅。
程序媛夏天
2024/11/19
4860
Vue3 过10种组件通讯方式
众所周知,Vue.js 中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法。
德育处主任
2022/04/17
2K0
Vue3 过10种组件通讯方式
Vue3(ts)中使用 pinia
Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API,可以理解为下一代 vuex,作者也称之为vuex5,同时vue已经将 pinia 收入 官方账户了
iwhao
2024/07/03
6891
Vue3之状态管理:Vuex和Pinia,孰强孰弱?
在前端开发中,状态管理器是一种用于管理应用程序全局状态的工具。它通常用于大型应用程序,可以帮助开发者更好地组织和管理状态,并提供一些强大的工具来简化状态的变更和使用。
用户6297767
2023/11/21
2.9K0
Vue3之状态管理:Vuex和Pinia,孰强孰弱?
Pinia状态管理器学习笔记,持续记录
官方文档:https://pinia.vuejs.org/ 中文文档:https://pinia.web3doc.top/
房东的狗丶
2023/02/17
1.7K0
推荐阅读
相关推荐
(十二)store 之间互相访问
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验