在vue3项目中使用pinia
- 使用vite创建项目和安装pinia依赖
npm init vite@latest
npm i pinia
- 从pinia包中解构出
defineStore
函数创建store片段,这里有一个要注意的点是第一个参数是这个store的id,第二个参数类比vue2中的script内容,state对应data,actions对应methods
import { defineStore } from "pinia";
export const fooStore = defineStore("foo", {state: () => {return {arr: [1, 2, 3],};},actions: {increment() {this.arr.push(this.arr.length + 1);},},
});
- 把pinia绑定到入口文件
main.js
上
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
const app = createApp(App);
app.use(createPinia()).mount('#app')
- pinia编写完成,开始使用,pinia使用起来是非常简单的。这里有一个点就是发现编写的store文件并没有绑定到main.js上,而是直接从pinia中解构出createPinia作为插件绑定到app,这也说明pinia中每个单独的store模块是按需加载的,并不是一次性全部绑定在app上一次性加载完成。
<template><div><div v-for="item in store.arr" :key="item">{{ item }}</div><button @click="handleClick">add</button></div>
</template>
<script setup>
import { fooStore } from '../store/fooStore';
const store = fooStore()
const handleClick = () => {store.increment();
}
</script>
- 总结扩展
1.pinia中编写store文件和vue2的选项式api可以说一模一样。