pinia-store

Pinia 使用 store 来管理应用程序的状态。我们可以在项目中创建一个或多个 store，每个 store 对应一个特定的状态域。

创建

创建一个 store 需要用到 defineStore 方法：

import { defineStore } from 'pinia'
import { ref } from 'vue'
 
export const useMenuStore = defineStore('menu', () => {
  // 左边栏菜单默认宽度
  const menuWidth = ref("250px")
  
  // 展开或伸缩左边栏菜单
  function handleMenuWidth() {
      menuWidth.value = menuWidth.value == '250px' ? '64px' : '250px'
  }
  
  return { menuWidth, handleMenuWidth }
})

第一个参数是个字符串，通过它定义了一个名为 menu 的全局 store, 注意，名称在应用中必须是唯一的 。另外，将返回的函数命名为 use… 这个格式，它符合组合式函数风格的约定。

defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。上面的代码中，我们在函数内声明了一个 menuWidth 菜单宽度的全局变量，并且是响应式的；然后还定义了一个展开/收缩菜单栏的方法，在该方法中，若当前菜单宽度为 250px 则赋值为 64px, 表示收缩；反之，则展开。最后，将 menuWidth 变量和 handleMenuWidth 方法返回，以供外界调用。

调用

之后需要在登录页面等需要设置/更新/使用全局属性的地方，通过 const store = userStore() 来获取 Store 对象并调用其中的方法。