pinia的使用及说明

目录

1.说明

2.使用步骤（本示例使用vue3）：

3.新建一个store文件夹，创建store

4.使用store

5.注意

---

1.说明

官网：Pinia | Pinia

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。

另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。

并非所有的应用都需要访问全局状态，但如果你的应用确实需要一个全局状态，那 Pinia 将使你的开发过程更轻松。

2.使用步骤（本示例使用vue3）：

①安装pinia

npm install pinia
或
pnpm install pinia
或
yarn add pinia

②在main.js中引入pinia（创建一个 pinia 实例 (根 store) 并将其传递给应用）

这个是vue3的写法，vue2的写法请参照官网

import './assets/main.css'

import { createApp } from 'vue'
import {createPinia} from 'pinia'
import App from './App.vue'

createApp(App)
.use(createApp())
.use(createPinia())
.mount('#app')

3.新建一个store文件夹，创建store

import { defineStore } from 'pinia';
import {ref} from 'vue';
import type {userType} from '@/stores/type';

export const useUserStore = defineStore('user', () => {
const user = ref({
    id:"",
    name:"",
    sex:""
});
const setUser = (userInfo:userType) =>{
    user.value = userInfo;
}
return { user, setUser }
});

我们得知道 Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字：

这个名字 ，也被用作 id ，是必须传入的， Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法，将返回的函数命名为 use... 是一个符合组合式函数风格的约定。

defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。

我上面的这个示例，采用的是SetUp函数的方式。方式如下：

传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

4.使用store

在上面的store内容中，我定义了一个user对象，然后定义了一个setUser方法，给这个user对象赋值，在企业开发中常用的场景，如前端登录成功之后，将后端返回的用户信息，权限信息等存储到store中，便于其他地方进行使用。

使用方式：

首先导入store，然后创建store对象，在上面的例子中我再方法中调用了store的setUser方法，设置了user的内容。

<script setup>
import { ref } from 'vue';
//导入store
import { useUserStore}  from '@/stores/index';
//获取store对象
const userStore = useUserStore();
defineProps({
  msg: {
    type: String,
    required: true
  }
})
const countInfo = ref(0);
const add = () => {
  console.log("执行了");
  countInfo.value = countInfo.value + 1;
  const user = ref({
    id: '123',
    name: '小孙',
    sex: '男'
  })
  userStore.setUser(user);
  console.log(userStore.user.value.id);
}
</script>

<template>
  <div>
    <p>{{ msg }}</p>
    <p>{{ countInfo }}</p>
    <button @click="add"> 按钮</button>
  </div>
</template>

然后在另一个vue中，我又导入store，然后创建store对象，通过store对象获取了user对象的内容，进行使用。

<script setup>
import { ref } from 'vue'
import { useUserStore}  from '@/stores/index';

const userStore = useUserStore();
const count = ref(0)

function increment() {
  count.value++;
  debugger
  console.log(userStore.user.value.id);
  console.log(JSON.stringify(userStore.user))
}
</script>

<template>
  <div>
  <button @click="increment">
    {{ count }}
  </button>
  <p v-for="(item,index) in userStore.user.value" :key="index">{{ item }}</p>
  </div>
</template>

5.注意

①导入store时，要使用花括号方式，因为store是通过export方式进行导出的，而不是export default方式。不添加花括号控制台会报错。

Uncaught SyntaxError: ambiguous indirect export: default

②步骤四中引入store的名字要和步骤三中导出的名字一致，否则前端会报错，如果我导入时的名字换成useUStore，如下：

import { useUStore}  from '@/stores/index';

则会报错

Uncaught SyntaxError: ambiguous indirect export: useUStore

更加详细的说明，大家可以参照官网。