526互联

pinia使用

发布时间 2023-08-18 15:58:03作者: Mondy-T

主要还是看官网

和vuex是一样的，但是比vuex强大，状态管理器，可以在组件里面直接调用数据，里面只可以有数据和方法

1.下载pinia

yarn add pinia
# 或者使用 npm
npm install pinia

2.创建pinia实例

创建store文件夹---》index.js文件里面写
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

3.注册pinia

到main.js里面写
import { PiniaVuePlugin } from "pinia";
app.use(pinia);

4.创建子实例

# 注意：useTextDdataStore  命名要：use自己的名字Store
这可以在index.js里面写，
也可以在models文件夹---》user.js里面写

import { defineStore } from "pinia";
# TextData是唯一的
export const useTextDdataStore = defineStore("TextData", {
  state: () => ({
    count: 9,
  }),
  getters: {},# 差不多就是计算属性
  actions: {},# 方法
});

4.组件使用

<script setup>
# 这里的 useTextDdataStore 要和user里面的名字要一样
import { useTextDdataStore } from '../store/models/user'
import { storeToRefs } from 'pinia'
# 实例化
const store = useTextDdataStore()
# 解压赋值 count要在定义中有 注意方法里面的要单独定义，不需要响应式
const { count, addr } = storeToRefs(store)
const { increment } = store

</script>
<template>
  <div class="home">
    你好呀
    num:{{ count }}
    <hr>
    <button @click="increment">点击</button>
  </div>
</template>