一，pinia就是Vuex，的替代工具，Vuex plus

如何将pinia引入到vue3项目中？

1.首先新建一个vue3项目 全填yes npm init vue@latest

2.安装好之后查阅官方文档

pinia使用文档

3.从而得知在项目中有俩种方式安装pinia

我的本地只有nodejs 因此我用
npm i pinia
在mian文件中导入pinia

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
// 导入方法createPinia
import { createPinia } from 'pinia'
// 执行方法得到实例
const pinia= createPinia()
// 把pinia实例加入到App应用中
use(pinia)
createApp(App).mount('#app')

二，使用pinia实现计数器案例

在src下创建store文件夹
counter.js文件

// 导入一个方法 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}
})

app.vue文件下使用

<script setup>
// 导入usecounter方法
import { useCounterStore } from '@/store/counter';
// 执行得到的store实例对象
const counterStore=useCounterStore()
console.log(counterStore);
</script><template><button @click="counterStore.increment">{{ counterStore.count }}</button>
</template><style scoped>
</style>

如图，点击该按钮就会++

三，getter方法的实现

// getter定义const doubleCount = computed(() =>  count.value * 2 )

文件 app.vue

<button @click="counterStore.increment">{{ counterStore.count }}</button>
{{ counterStore.doubleCount }}

点击，doubleCount会同时变化

定义异步action
npm i axios

 // 定义异步actionconst API_URL='http://geek.itheima.net/v1_0/channels'const list =ref([])const getList= async ()=>{const res = await axios.get(API_URL)list.value=res.data.data.channels}

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

四，数组解构

普通解构会丢失数据

1. 示例

直接解构

打印输出 俩个普通的值

包裹之后输出为俩个ref响应式对象

而方法可以直接解构

总结