Java登陆第四十三天——Pinia

合集 - Java登陆(70)

69.Java登陆第四十三天——Pinia2024-04-17

70.Java登陆第四十四天——跟写微头条遇到的问题2024-04-25

到目前一共学习了两种传参方式。
	1.组件传参
	2.路由传参
这两种传参方式并不好用，所以出现了Pinia

Pinia平替了Vuex，而且比它更优秀。

Pinia是Vue衍生的生态系统之一，所以，在使用它前需要导入依赖。

npm i pinia

简单地说，Pinia就是共享数据。各个.vue组件可以利用Pinia更好的完成数据传递。(Vuex同)

Store

Pinia官网

Pinia设计了一个对象Store

Store是一个保存状态和业务逻辑的实体，它承载着全局共享的数据。每个组件都可以读取和写入它。

它有四个属性：

id
- Store对象的唯一标识，可不写；若写，必须不重复
state
- 存放的数据，等价于属性(字段)。
getter
- 对属性的计算操作，一般不对数据进行修改。
actions
- 定义修改数据的函数。

Pinia提供了两个函数**defineStore()和createPinia()

defineStore()：定义Store对象。
createPinia()：实例化Pinia。(一般在mian.js中绑定)

Pinia栗子

1.创建src\store\pinia.js

//定义Sotre对象。
import {defineStore} from 'pinia';

//ES6的分别导出，官方推荐命名use开头 Store结尾
export const useTestStore = defineStore({
    //在Pinia中，state 被定义为一个初始化数据的函数。
    state:function () {
        return{
         name:"张三",
         age:19
        }
    },
    //对属性的计算操作，一般不对数据进行修改。
    getters:{
        getAge(){ return this.age+1 }
    },
    //定义修改数据的函数。
    actions:{
        initAge(){ this.age=18 }
    }
})

2.绑定Pinia

import {createApp} from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'

let app = createApp(App)
const p = createPinia();
//绑定pinia对象
app.use(p);
//挂载试图
app.mount("#app");

至此，哪个组件需要读取数据就导入src\store\pinia.js即可。

3.组件编写

left.vue

<script setup>
import {useRoute} from 'vue-router'
import {useTestStore} from '../store/pinia.js'

let t = useTestStore();
</script>

<template>
  <h3>我是left.vue，负责修改数据</h3>
  姓名：<input type="text" v-model="t.name">
  年龄：<input type="text" v-model="t.age">
  <button @click="t.initAge()">初始化年龄</button>
</template>

<style scoped>
</style>

right.vue

<script setup>
import {useRoute} from 'vue-router'
import {useTestStore} from '../store/pinia.js'

let t = useTestStore();
</script>

<template>
  <h3>我是right.vue，负责展示数据</h3>
  <p v-text="t"></p>
  <ul>
    <li v-text="t.name"></li>
    <li v-text="t.age"></li>
    <li v-text="t.getAgeAdd"></li>
  </ul>
</template>

<style scoped>
</style>

App.vue

<script setup>
import {useRouter} from 'vue-router'
import Left from './components/left.vue'
import Right from './components/right.vue'
</script>

<template>
  <Left></Left>
  <Right></Right>
  <h3>APP尾部</h3>
</template>

<style scoped>
</style>