在vue3中使用pinia

在vue3项目中使用pinia

1. 使用vite创建项目和安装pinia依赖

npm init vite@latest
npm i pinia

2. 从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);
    },
  },
});

3. 把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')

4. 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>

5. 总结扩展

1.pinia中编写store文件和vue2的选项式api可以说一模一样。