Vue3-Pinia快速入门
1.安装pinia
npm install pinia -save2.在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)
这样就保留了响应性