pinia基本使用，vue3

一、vue3项目引入pinia

安装
用你喜欢的包管理器安装 pinia：

yarn add pinia
或者使用 npm
npm install pinia

创建一个 pinia 实例 (根 store) 并将其传递给应用：
main.js

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

二、创建响应式数据并在组件中实现对数据的控制

getters实现

Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去
store/counter.js

import { defineStore } from "pinia";
import { computed, ref } from "vue";

export const useCounterStore = defineStore('counter', () => {
  //声明数据
    const count = ref(0);
  //声明操作数据的方法action
    const addCount = () => {
    return count.value++
    }
    const subCount = () => {
     return count.value--;
    };
  //声明数据的计算属性getters 
    const count2 = computed(()=> count.value+1)
    return {
      addCount,
      subCount,
      count,
      count2,
    };
})

app.js

<script setup>
import sonIndex from './components/sonIndex.vue'
import sonsonIndex from './components/sonsonIndex.vue'
import { useCounterStore } from './store/counter.js'
const counterStore = useCounterStore()
</script>

<template>
  <div>
    <h1>{{ counterStore.count }}</h1>
    <h1>{{ counterStore.count2 }}</h1>
<sonIndex></sonIndex>
<sonsonIndex></sonsonIndex>
  </div>
</template>

sonIndex.vue

<template>
    <div>
<h1>我是son2--{{ counterStore.count }}--{{ counterStore.count2 }}<button @click="counterStore.addCount">+</button></h1>
    </div>
</template>

<script setup>
import { useCounterStore } from '../store/counter';
const counterStore = useCounterStore()
</script>

sonsonIndex.vue

<template>
    <div>
<h1>我是son1--{{ counterStore.count }}--{{ counterStore.count2 }}<button @click="counterStore.subCount">-</button></h1>
    </div>
</template>

<script setup>
import { useCounterStore } from '../store/counter';
const counterStore = useCounterStore()
</script>

action异步实现

编写方式：异步action函数的写法和组件中获取异步数据的写法完全一致
channel.vue

import { defineStore } from "pinia";
import { ref } from "vue";
import axios from "axios";

export const useChannelStore = defineStore("channer", () => {
  const channrList = ref([]);

    //action异步实现
  const getList = async () => {
    const res = await axios.get("http://geek.itheima.net/v1_0/channels");
      channrList.value = res.data.data.channels
      console.log(channrList.value);
  };

  return {
    getList,
    channrList,
  };
});

sonsonIndex.vue

<template>
    <div>
<h1>我是son1--{{ counterStore.count }}--<button @click="counterStore.subCount">-</button></h1>
<button @click="ChannelStore.getList">获取列表</button>
<ul>
    <li v-for="item in ChannelStore.channrList" :key="item.id" >{{ item.name }}</li>
</ul>
    </div>
</template>

<script setup>
import { useCounterStore } from '../store/counter';
import {useChannelStore} from '../store/channel'
const counterStore = useCounterStore()
const ChannelStore = useChannelStore()
</script>

storeToRefs

如果我们将count从countStore中解构出来，数据会变成非响应式的。
这是我们需要从pinia中获取storeToRefs方法。将store包起来，要注意不能结构方法出来，方法仍需要从store中直接解构，当然，我们也可以直接使用 store.属性名 或 store.方法名 直接使用。

//数据变成非响应式的
import { useCounterStore } from '../store/counter';
const counterStore = useCounterStore()
const {count } = counterStore

<h1>我是son1--{{ count }}--<button @click="counterStore.subCount">-</button></h1>

解决：

//数据变成响应式的
<script setup>
import {storeToRefs} from 'pinia'
import { useCounterStore } from '../store/counter'
const counterStore = useCounterStore()
const {count } = storeToRefs(counterStore)
</script>

<h1>我是son1--{{ count }}--<button @click="counterStore.subCount">-</button></h1>

pinia持久化

1. 安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

2. main.js 使用

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

3. store仓库中，persist: true 开启

import { defineStore } from "pinia";
import { computed, ref } from "vue";

export const useCounterStore = defineStore('counter', () => {
  //声明数据
    const count = ref(0);
  //声明操作数据的方法action
    const addCount = () => {
    return count.value++
    }
    const subCount = () => {
     return count.value--;
    };
  //声明数据的计算属性getters 
    const count2 = computed(()=> count.value+1)
    return {
      addCount,
      subCount,
      count,
      count2,
    };
}, {
    persist:true
})

官方文档:https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
官方文档中有许多配置项如：

{
  persist:{
key:'xiaohuang-count'//定义本地存储的键名（默认是该仓库的唯一标识）
path:['count']//定义本地存储哪一项（默认全部存储）
storage: sessionStorage,//定义使用哪种本地存储（默认localStorage）
}
}

更多配置见