创建定义store并使用组合式api、选项式api

• 在项目根目录创建store文件夹（此步骤和vuex相同）

• 在步骤一的store文件夹下根据不同的用途场景创建单独的store文件（等同于vuex中分模块）、

  

定义store基本步骤

步骤

1. 导入defineStore()方法：import {defineStore} from 'pinia'
2. 使用defineStore定义store并导出

import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以use开头且以Store结尾。(比如 `useUserStore`，`useCartStore`)

// 第一个参数是你的应用中 Store 的唯一ID（因为pinia并没有vuex中模块的概念，每个文件就是单独一个模块了，所以id必唯一）。

// defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。
//   如果是一个对象，则可以使用选项式api来定义store（旧应用渐进式升级、vue2可使用这种方式，vue3建议用下面的组合式api方式）
//   如果是一个箭头函数，则可以使用组合式api来定义store,（推荐，因为vue3用的就是组合式api比较多。）
export const useAlertsStore = defineStore('alerts', {
  // 其他配置...
})

定义store实例（组合式api）

定义一个用户相关的状态管理→store/user.js：

import {defineStore} from 'pinia'
import {ref} from 'vue'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，
// 同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一ID（因为pinia并没有vuex中模块的概念，每个文件就是单独一个模块了，所以id必唯一）。
// 第二个参数如果是一个对象，则可以使用选项式api来定义store（旧应用渐进式升级、vue2可使用这种方式，vue3建议用下面的组合式api方式）
//          如果是一个箭头函数，则可以使用组合式api来定义store,（推荐，因为vue3用的就是组合式api比较多。）
export const useUserStore = defineStore('user', {
  // 选项式 store的使用方法：

  // state和vuex不太一样，必须要返回一个函数，vuex中是一个对象属性。
  state: () => {
    return {
      count: ref(12),
      num: ref(100)
    }
  },
  // 定义getters方式类似vuex
  getters: {
    doubleCount: (state) => {
      return state.count * 2
    }
  },
  // 也是类似vuex
  actions: {
    increCount() {
      // pinia中因为action相当于组合了mutiation和actions，所以可以直接修改state中的数据。
      // 在选项式api中actions访问state中的数据，是用this来直接访问的。
      this.count++
    }
  }
})

定义store实例（选项式api）

// 使用类似vue3中的组合式api方式定义store
export const useUserStore2 = defineStore('user2', () => {

  // 直接定义变量就是等同于定义state，比如这里用ref()定义响应式数据
  const money = ref(888)

  // 定义方法就是等同于定义actions
  const increMoney = (value) => {
    money.value += value
  }

  // 定义computed计算属性就是等同于定义getters
  const doubleMoney = computed(()=>{
    return money.value * 2
  })

  // 使用选项式api，必须要返回，否则外面用不到。
  return {
    money,
    increMoney,
    doubleMoney
  }
})

在vue中使用store

1. 导入自己编写的store

// 1. 导入store
import {useUserStore, useUserStore2} from './store/user';

1. 实例化并用变量接收

// 2. 创建store实例
const userStore = useUserStore()

const userStore2 = useUserStore2()

1. 引用store变量中的state、getters、actions

<template>
  <div>hello pinia</div>
  <!-- 引用store中的state、actions、getters -->
  <p>userStore中的数据：{{ userStore.count }}</p>
  <p>userStore中的数据：{{ userStore.doubleCount }}</p>
  <button @click="userStore.increCount">自增+1</button>

  <hr>
  <p>userStore2中的数据：{{ userStore2.money }}</p>
  <p>userStore2中的数据：{{ userStore2.doubleMoney }}</p>
  <button @click="userStore2.increMoney(10)">钱+10</button>

</template>