# Pinia 5分钟入门不完全指北

# 安装

yarn add pinia
# 或者使用 npm
npm install pinia
# pnpm 也不错
pnpm install pinia

然后再在 main.js 加载组件

import { createPinia } from 'pinia'

// 注意这里是调用方法
app.use(createPinia())

至此 pinia 已加载完毕，推荐在 src 目录创建文件夹 store，将状态管理文件统一管理

为了保证足够简单，本文不探讨 Vue2, Nuxt, TypeScript 使用 pinia 的情况。请参考中文文档 (opens new window) 你都这么能折腾了看个官方文档应该问题不大吧

强烈推荐配合 setup-script 使用

# 定义store

在 store 文件夹中新建文件：counter.js

counter.js 是官方示例，你也可以叫 globalState.js 之类的，只要文件名和 store 的用途一致即可

复制粘贴以下代码

import { defineStore } from 'pinia'

// useCounterStore 也可以叫 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的 **唯一** id
export const useCounterStore = defineStore('main', {
// 推荐使用 完整类型推断的箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  // 官方直接明说了可以把 getters 和 computed 划等号来理解
  getters: {
    doubleCount: (state) => state.counter * 2,
    // 也可以使用 this，也可以直接调用其他的 getter
    // 总之就是把它当 computed
    doublePlusOne(): number {
      return this.doubleCount + 1
    },
  },
  // 官方也直说了 Actions 相当于组件中的 methods，非常好懂
  // pinia 去除了 mutation， 异步操作同样推荐在 action 中执行
  actions: {
	increment() {
		this.counter++
	},
    randomizeCounter() {
	  this.counter = Math.round(100 * Math.random())
	},
  },
})

# 使用store

// 引入 store, useCounterStore 是你定义的 export 方法
import { useCounterStore } from '../stores/counterStore'

export default {
  setup() {
  // 如果你使用了setup-script，忽略上面两行代码
	const couterStore = useCounterStore
	// 此时 couterStore 就等于你的 store.state 
	// 你可以直接在模板中使用 couterStore.counter
	// 也可以像使用 state 一样直接使用 action / getter

    // 如果你使用了setup-script，忽略下面的代码
	return { couterStore }
  }
}

对应的模板如下

<template>
	<div>counter = {{ couterStore.counter }}</div>
	<div>doubleCounter = {{ couterStore.doubleCount }}</div>
	<button @click="counterStore.increment">increase counter</button>
</template>

至此就是 pinia 的基本操作了。是不是非常简单？

# Pinia 5分钟入门不完全指北

# 安装

# 定义store

# 使用store

# 其他你应该知道的姿势