一、pinia概念

pinia:vue3官方的状态管理工具
安装: npm install pinia -S

二、在main.js中使用pinia

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'createApp(App).use(createPinia()).mount('#app')

三、pinia的核心概念

store
state - 是一个函数，返回一个对象，对象里面就是可以共享的状态
getters - 是一个对象，可以定义类型计算属性的函数，当变量使用
acitons - 是一个对象定义方法修改state里面的数据，可以是异步的，也可以是同步的

四、创建store文件

// store/userStore.js
import {defineStore} from 'pinia'export const useUserStore = defineStore('user',{// 定义共享的状态state(){return {firstName:'张',lastName:'三',gender:'女',age:12}},getters:{// 请写普通函数，确保this就是当前的storefullName(){// 现在我们访问store里面的状态，直接通过thisreturn this.firstName + " "+ this.lastName;},// 打招呼的语言welcomeWord(){return "我的名字是:"+this.fullName+",我的性别是:"+this.gender+",我的年龄是:"+this.age;}},actions:{// 请写普通函数，确保this就是当前的store// payload就是调用函数时候传入的实参changeFirstName(payload){this.firstName = payload;},changeLastName(payload){this.lastName = payload},changeAgeAsync(payload){// 内层要是箭头函数setTimeout(()=>{this.age = payload},3000)}}
})

五、setup中使用store

import {useUserStore} from '../store/userStore'
// 获取store
const userStore = useUserStore()
// 使用state里面的状态
console.log(userStore.firstName)
// 使用getters里面的
console.log(userStore.welcomeWord)
// 修改state里面的状态
// 方法1 可以直接赋值修改
userStore.firstName = '李'
// 方法2 可以调用actions里面的方法修改
userStore.changeFirstName('王')

六、在选项式API中使用pinia

安装:npm install pinia -S

七、使用pinia插件

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
createApp(App).use(createPinia()).mount('#app')

八、定义store文件

// store/taskStore.js
import {defineStore} from 'pinia'export const useTaskStore = defineStore('task',{state(){return {tasks:[{name:'吃饭',completed:true,id:1},{name:'睡觉',completed:false,id:2},{name:'学习',completed:false,id:3},]}},getters:{// getters的最外层要写普通函数// 未完成任务数count(){return this.tasks.filter(item=>!item.completed).length}},actions:{addTask(payload){this.tasks.push(payload)},addTaskAsync(payload){setTimeout(()=>{this.tasks.push(payload)},3000)}}
})

九、选项式api中使用辅助函数

<script>
import {mapGetters,mapState,mapActions} from 'pinia'
import {useTaskStore} from '../store/taskStore'
// mapGetters 可以把store里面的getters扩展到当前组件的computed属性，使用起来和当前组件的计算属性一样
// mapState 可以把store里面的State扩展到当前组件的computed属性，使用起来和当前组件的计算属性一样
// mapActions 可以把store里面的Actions扩展到当前组件的methods属性，使用起来和当前组件的methods一样
export default {computed:{...mapGetters(useTaskStore,['count']),   // this.count...mapState(useTaskStore,['tasks']),  // this.tasks},methods:{...mapActions(useTaskStore,['addTask']), // this.addTask({name:"xxx",id:xxx,completed:xxxx})}
}
</script>

13_Pinia组件库相关推荐

javascript组件_是的，JavaScript运行Swift。无论如何都要构建您的组件库。
javascript组件 Here's a question I've heard a few times recently: 这是我最近几次听到的一个问题: "What if we cre ...
Element 2.6.0 发布，基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
从零实现Vue的组件库（十）- Select 实现
当选项过多时,使用下拉菜单展示并选择内容. Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显: 单选.多选的区分,以及对应处理. 1. 实例代码 <fat-sel ...
vant 1.6.6 发布，轻量级移动端 Vue 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> vant 1.6.6 已发布.Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库.通过 Va ...
Vue 组件库 HeyUI@1.16.0 更新日志
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> HeyUI :一个基于Vue.js的高质量UI组件库新版本v1.16.0 1.Col 重命名为 Cell 其实一 ...
LCUI.css 0.1.2 发布，基于 LCUI 开发的 UI 组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> LCUI.css 是一个适用于 LCUI 应用程序的 UI 组件库,使用 C 语言编写,提供了一些通用的组件和 c ...
iView：一套基于Vue的高质量UI组件库
基于Vue的UI组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . 先睹为快 iView 主要服务于PC界面的中后台业务,是一套高质量的开源UI组件库,先上地址: github.c ...
京东Vue组件库NutUI 2.0发布：将支持跨平台！
NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...

13_Pinia组件库

一、pinia概念

二、在main.js中使用pinia

三、pinia的核心概念

四、创建store文件

五、setup中使用store

六、在选项式API中使用pinia

七、使用pinia插件

八、定义store文件

九、选项式api中使用辅助函数

13_Pinia组件库相关推荐

最新文章

热门文章