直接上代码
const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)console.log(finalDate) // 31 March 2019-
安装
yarn add pinia
# or with npm
npm install pinia
-
创建第一个store仓库
1、在src目录下创建store目录
2、创建一个 PiniaTest.ts 的文件（文件名可以根据自己需求来）
import {defineStore} from 'pinia'// 使用 defineStore 定义一个仓库，
// 组件中需要引入仓库，并使用useStorePinia 进行实例化
// main 是仓库唯一的ID，可以根据自己的需求定义
export const useStorePinia = defineStore('main', {// 闭包state () {return {msg: 'hello word',count: 10,content: '这是通过getters获取Pinia管理的仓库数据'}},// 简写方式// state: () => ({// msg: 'hello word',// count: 10// }),getters:{getMsgFn(){return this.content}},actions:{// actions 里面可以执行同步和异步任务// 也可以接收外部传递进来的参数// 可以直接修改仓库的值，此处不能使用箭头函数，否则找不到this，打印显示 undefinedchangeMsg (val) {console.log('传入进来的值：', val)this.msg = '1111'this.count == val;}}
})
-
引入并使用步骤
-
在 main.js 里面引入pinia
-
使用 createPinia 进行实例化
-
挂载到Vue身上(实际上是将插件进行注册，给放到已经注册的插件数组列表中)
import { createApp } from 'vue'
// 引入inia
import {createPinia} from 'pinia'
import App from './App.vue'console.log('createPinia:', createPinia);// 创建实例
const pinia = createPinia();console.log('pinia:', pinia);// 使用插件
createApp(App).use(pinia).mount('#app')
-
Pinia在组价中的使用
<template><div style="background: pink;padding: 10px;margin: 10px 0;"><div>组件11111111111</div><div>仓库数据：{{count}}---{{getMsgFn}}</div><button @click="changeStoreCountFn">点击</button></div>
</template><script setup>
import {defineProps} from 'vue';
import { storeToRefs } from "pinia";// 引入仓库
import {useStorePinia} from '../Store/PiniaTest'// 此处 defineStore 与仓库名一样
const store = useStorePinia();// 此处可以获取getters 和 actions 中的函数，但是不能直接获取仓库中的数据，需要使用storeToRefs强转ref类型
const {changeMsg, getMsgFn} = store;// 只有强转ref后数据才是响应式的
const {msg, count} = storeToRefs(store);
console.log(11111, store,storeToRefs(store), msg, count)// 修改仓库count值
const changeStoreCountFn = () => {// 方式 1、通过触发仓库 actions 中定义的函数执行changeMsg(++count.value)console.log(2222,getMsgFn)// 方式 2、读取仓库数据进行修改// count.value++// msg.value = 'aaaaaa'// 方式 3、对象形式修改仓库数据// store.$patch({// msg: 'change word',// count: ++count.value// })// 方式 4、函数形式修改仓库数据// store.$patch((state) =>{// state.msg = 'change word';// state.count++// })
}
</script>
