安装
用你喜欢的包管理器安装 pinia:
创建一个 pinia 实例 (根 store) 并将其传递给应用:
import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue'
const pinia = createPinia() const app = createApp(App)
app.use(pinia) app.mount('#app')
|
Option Store
与 Vue 的选项式 API 类似,我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象
export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { double: (state) => state.count * 2, }, actions: { increment() { this.count++ }, }, })
|
使用 Store
虽然我们前面定义了一个 store,但在我们使用 <script setup>
调用 useStore()(或者使用 setup() 函数,像所有的组件那样) 之前,store 实例是不会被创建的:
<script setup> import { useCounterStore } from '@/stores/counter'
const store = useCounterStore() </script>
|