当前位置: 首页 > news >正文

pinia 的使用方法

使用方式(选项式)

1、在 mian.js 导入 pinia 里的 createPinia 函数。

2、app.use 这个 createPinia 函数的返回值。

// main.jsimport { createPinia } from 'pinia';app.use(createPinia());

3、创建一个 js 文件(该文件保存着共享的数据,共享的方法),惯例上会叫该 js 文件为 store

4、在 store 文件里,从 pinia 里导入 defineStore 函数(该函数是定义 store 的函数)。

5、在 defineStore 函数的第二个参数定义共享的数据和方法。

6、用 export 导出 defineStore 函数的返回值,该返回值是一个函数,在这里我命名该函数为 useUserStore。

// userStore.jsimport { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => {return {name: '李小明',age: 18,hobby: 'basketball'}},getters: {// this 形式// doubleAge() {//     return this.age * 2// },doubleAge: (state) => {return state.age * 2}},actions: {changeAge() {this.age = 16},}});

7、在需要该 store 里的数据和方法的 vue 文件里导入该 useUserStore 函数。

8、在 vue 文件里使用 setup 函数,在 setup 函数里运行一次 useUserStore 函数,并把该 useUserStore 函数的返回值赋予给一个变量,该变量保存着上面 defineStore 函数定义的共享的数据和方法。

10、在 setup 函数里 return 该变量,该变量就会被 vue 实例代理(即 this)。

<template><div><p>姓名:{{ userStore.name }}</p><p>年龄:{{ userStore.age }}</p><p>爱好:{{ userStore.hobby }}</p><p>双倍年龄:{{ userStore.doubleAge }}</p><p>计算属性:{{ getName }}</p><div><button @click="userStore.changeAge">userStore 的 changeAge 方法,点击改变年龄</button></div><div style="margin: 10px 0;">app 的按钮<button @click="consoleName" style="margin-left: 5px;">点击我</button></div></div>
</template>
<script>import { useUserStore } from './store/userStore.js';export default {setup() {const userStore = useUserStore();return {userStore // 导出 userStore,userStore 会被 vue 实例代理,即 this。}},data() {return {}},methods: {consoleName() {console.log(this.userStore.name); // 通过 this 访问 userStore}},computed: {getName() {return this.userStore.name // 通过 this 访问 userStore}}}</script><style></style>

温馨提示: store 会保存在组件实例的 _pStores 属性里。

整体演示

userStore.js(全局状态文件)

import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {// 箭头函数state: () => {return {name: '李小明',age: 18,hobby: 'basketball'}},// 普通函数// state() {//     return {//         name: '李小明',//         age: 18,//         hobby: 'basketball'//     }// },getters: {// this 形式// doubleAge() {//     return this.age * 2// },// 参数形式doubleAge: (state) => {return state.age * 2}},actions: {changeAge() {this.age = 16},}
});

App.vue

<template><div><p>姓名:{{ userStore.name }}</p><p>年龄:{{ userStore.age }}</p><p>爱好:{{ userStore.hobby }}</p><p>双倍年龄:{{ userStore.doubleAge }}</p><p>计算属性:{{ getName }}</p><div style="margin: 10px 0;"><button @click="userStore.changeAge">userStore 的 changeAge 方法,点击改变年龄</button></div><div style="margin: 10px 0;">app 的按钮<button @click="consoleName" style="margin-left: 5px;">点击我</button></div><div style="border: 1px solid skyblue;padding: 10px ;"><HelloWorld></HelloWorld></div></div>
</template>
<script>import { useUserStore } from './store/userStore.js';import HelloWorld from './components/HelloWorld.vue';export default {setup() {const userStore = useUserStore();return { userStore }},components: {HelloWorld},mounted() {},data() {return {}},methods: {consoleName() {console.log(this.userStore.name);}},computed: {getName() {return this.userStore.name}}
}</script><style></style>

子组件 HelloWorld.vue

<template><p>我是子组件</p><p>userStore.age 等于 {{ userStore.age }}</p><button @click="changeAge">我是子组件按钮</button>
</template><script>import { useUserStore } from '../store/userStore.js';export default {setup() {const userStore = useUserStore(); // 整体导出const changeAge = userStore.changeAge; // 单独导出一个方法return {userStore,changeAge}},data() {return {}},methods: {}
}
</script><style></style>

State

state 的值是一个函数。

state 相当于 data,是我们需要在组件之间共享的数据。

普通方法

state() {return {name: '李小明',age: 18,hobby: 'basketball'}
},

箭头函数

state: () => {return {name: '李小明',age: 18,hobby: 'basketball'}
},

在 TypeScript 中使用箭头函数将自动推断这些属性的类型。

Getters

getters 的值是一个对象。

getter 相当于计算属性,计算的结果会被缓存下来,只有当依赖的值发生改变才会重新计算。

使用第一个参数 state 可以访问 state 

getters: {doubleAge(state) {return state.age * 2},
}

也可以在普通函数里使用 this,从而访问到整个 pinia 实例(所以可以在 getter 里访问另外的 getter),

getters: {doubleAge() {return this.age * 2  // this(pinia 实例) 代理了 state 里的属性},
}

但是在箭头函数里,因为箭头函数里 this 的指向问题,所以箭头函数只能使用第一个参数 state 来访问 state,

getters: {doubleAge: (state) => {return state.age * 2}
}

Actions

actions 的值是一个对象。

action 相当于方法。

普通函数可以通过 this 访问 pinia 实例

actions: {changeAge() {this.age = 16},
}

因为箭头函数的 this 的问题,Action 里使用箭头函数访问 pinia 实例是不行的。

http://www.lryc.cn/news/287173.html

相关文章:

  • sky_take_out
  • LC 2865. 美丽塔 I
  • 代理设计模式JDK动态代理CGLIB动态代理原理
  • [陇剑杯 2021]webshell
  • 美易官方:小米汽车交付时间传闻被官方辟谣
  • MySQL 简介
  • 动态规划最后一天(回文串)
  • c语言之scanf函数
  • ORM-02-JPA Java Persistence API 注解入门介绍
  • 【MQ01】什么是消息队列?用哪个消息队列?
  • 2023年度AI盘点 AIGC|AGI|ChatGPT|人工智能大模型
  • 【Flink-CDC】Flink CDC 介绍和原理概述
  • 长城资产信息技术岗24届校招面试面经
  • 【计算机网络】TCP握手与挥手:三步奏和四步曲
  • 设计模式学习总结
  • 「HDLBits题解」Cellular automata
  • 什么是API ?
  • Pytest中conftest.py的用法
  • java.lang.IllegalArgumentException: When allowCredentials is true
  • vue折叠展开transition动画使用keyframes实现
  • 书生·浦语大模型实战营-学习笔记5
  • 10. Profile
  • YOLO 自己训练一个模型
  • 3.Eureka注册中心
  • 基于springboot+vue的墙绘产品展示交易平台系统(前后端分离)
  • 网络原理-初识(1)
  • 【GitHub项目推荐--人脸识别】【转载】
  • NLP自然语言处理介绍
  • 在线WebOffce在HTML/VUE/Electron纯前端网页编辑Office之打开Word后自动处于修订模式
  • thinkphp+vue+mysql旅游推荐攻略分享网站p0667