一 Pinia是什么？

• pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替代品
• 1. 提供更加简单的API(去掉了 mutation)
• 2. 提供符合组合式风格的API (和 Vue3 新语法统一)
• 3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块
• 4. 搭配 TYpeScript 一起使用提供可靠的类型推断

一.添加pinia到Vue项目

1. 使用 create-vue创建空的新项目

• npm init vue@latest

2. 按照官方文档安装 pinpa到项目

• Vue-one 描述过

运行代码成功即可

安装pinpa

1. 观看pinpa中文官方文档
2. 开始
3. 安装pinpa
4. 命令:

npm install pinia

5创建一个pinia实例{根 store}并将其传递给应用：

// 1 导入createPinia
import { createPinia } from 'pinia'

// 2 执行方法得到实例
const pinia = createPinia()

// 3 把pinia实例加入到app应用中

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

二 Pinia-couter基础使用

Pinpa中文官方文档-基础示例

1. 首先创建个Store

// 导入一个方法 defineStore

import { defineStore } from "pinia"
import { ref } from 'vue'

export const useCounterStore = defineStore('counter',() =>{
  // 定义数据(state)
  const count = ref(0)
  // 定义修改数据的方法(action 同步+异步)
  const increment = () => {
    count.value++
  }

  // 以对象的方式return组件使用
  return{
    count,
    increment
  }
})

2 组件中、使用它

<script setup>
// 1 导入 use 打头的方法
import { useCounterStore } from './stores/counter'
// 2 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)
</script>
<template>
  <button @click="counterStore.increment">{{ counterStore }}</button>
</template>

三、Pinia-store TORefs和调试

storeToRefs使用

• 使用storeToRefs函数可以辅助保持数据(state + getter)的响应式结构

<script setup>
// 1 导入 use 打头的方法
import { onMounted } from 'vue';
import { useCounterStore } from './stores/counter'
// 2 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)

// 直接解构赋值(响应式丢失)
const { count ,doubleCount } = counterStore

// 触发action
onMounted(() => {
  counterStore.getList()
})
</script>
<template>
  <button @click="counterStore.increment">{{ count}}</button>
  {{ doubleCount }}

  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }} </li>
  </ul>
</template>

解决方式:用方法StoreToRefs

<script setup>
// 1 导入 use 打头的方法
import { onMounted } from 'vue';
import { useCounterStore } from './stores/counter'
import { storeToRefs } from 'pinia'
// 2 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)

// 直接解构赋值(响应式丢失)
// const { count ,doubleCount } = counterStore


// 方法包裹(保持响应式丢失)
const { count , doubleCount } = storeToRefs(counterStore)

// 触发action
onMounted(() => {
  counterStore.getList()
})
</script>
<template>
  <button @click="counterStore.increment">{{ count}}</button>
  {{ doubleCount }}

  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }} </li>
  </ul>
</template>

如果调用方法的结构赋值

<script setup>
// 1 导入 use 打头的方法
import { onMounted } from 'vue';
import { useCounterStore } from './stores/counter'
import { storeToRefs } from 'pinia'
// 2 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)

// 直接解构赋值(响应式丢失)
// const { count ,doubleCount } = counterStore


// 方法包裹(保持响应式丢失)  关于数据相关的处理
const { count , doubleCount } = storeToRefs(counterStore)


// 方法直接从原来的couterStore中解构赋值
const { increment } = counterStore


// 触发action
onMounted(() => {
  counterStore.getList()
})
</script>
<template>
  <!-- <button @click="counterStore.increment">{{ count}}</button> -->
  <button @click="increment">{{ count}}</button>
  {{ doubleCount }}

  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }} </li>
  </ul>
</template>

总结:

1. Pinia是用来做什么？

• 集中状态管理工具，新一代的vuex 2.Pinia中还需要mutation吗?

• 不需要，action即支持同步也支持异步 3.Pinia如何实现getter?

• computed计算属性函数 4.pinia产生的Store如何结构赋值数据保持响应式?

• storeToRefs