Vue3-Pinia快速入门

1.安装pinia

npm install pinia -save

2.在main.js中导入并使用pinia 

// 导入piniaimport { createPinia } from "pinia";
const pinia = createPinia();//使用pinia
app.use(pinia)app.mount('#app')

 3.在src目录下创建包：store，表示仓库

4.在store里面创造一个airTicket.js,用来存放搜索机票相关数据或者函数

//定义关于counter的store
import { defineStore } from 'pinia'//defineStore 是返回一个函数 函数命名最好有use前缀，根据函数来进行下一步操作
const useSearchAir = defineStore('airTicket',{state: () => {return{departPoint:"",arrivePoint:"",departTime:"",arriveTime:"fdsa",}},// 修改方法actions: {setName(name){this.departPoint = name;},setPassword(p){this.password = p;},setPhone(p){this.phone = p;}}
})export default useSearchAir()

5.导入仓库：

import useSearchAir from "@/store/airTicket";
let useAirTicket = useSearchAir;

6.进行相关操作：

比如：

修改数据，打印数据

//修改数据，
useAirTicket.$patch({arrivePoint:"改革发u",arriveTime:"213234"})//打印数据
console.log(useAirTicket.arrivePoint)

8.注意事项

对仓库里面的数据操作不能直接解构，

比如这样

const {arrivePoint, arrivvTime} = useAirSearch

这样使用就比较方便，但是这样的话这2个结构出来的数据就不具备响应性了

如果要解构，需要这样：

 import { storeToRefs } from 'pinia'const {arrivePoint, arrivvTime} = storeToRefs(useAirSearch)

这样就保留了响应性