pinia的基本使用

目录

 Pinia 是什么 ：                            

 安装 ：  

修改main.js，引入pinia提供的createPinia方法，创建根存储。

创建store

模拟往state中添加数据

这里我们在Home.vue中进行引入，进行演示

多个组件使用state (共享数据)

这里我们再创建一个组件Son (这里我用的是路由跳转，所以router的index.js注册组件)

修改state数据

接下来让数据变成响应式

重置state数据

批量修改state的数据 

 局部批量修改

getters属性介绍

如何调用getters里的值

getters的值传递参数

active的使用

---

 Pinia 是什么 ：                            

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案，Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。在Vue2中我们经常使用vuex,但在vue3中我们使

用更多的是pinia，并且pinia从某种意义上来说也是vuex的一个升级   ----- >pinia官方文档

 安装 ：  

yarn add pinia
# 或者使用 npm
npm install pinia

提示

安装完成后我们需要将pinia挂载到Vue应用中，也就是我们需要创建一个根存储传递给应用程序，简单来说就是创建一个存储数据的数据桶，放到应用程序中去。

如果您的应用使用 Vue 2，您还需要安装组合 API：@vue/composition-api。 如果您使用 Nuxt，则应遵循 这些说明。

修改main.js，引入pinia提供的createPinia方法，创建根存储。

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();


const app = createApp(App);
app.use(pinia);
app.mount("#app");

创建store

store简单来说就是数据仓库的意思，我们数据都放在store里面。当然你也可以把它理解为一个公共组件，只不过该公共组件只存放数据，这些数据我们其它所有的组件都能够访问且可以修改。

我们需要使用pinia提供的defineStore()方法来创建一个store，该store用来存放我们需要全局使用的数据。

首先在项目src目录下新建store文件夹，用来存放我们创建的各种store，然后在该目录下新建index.js文件

​
import { defineStore } from 'pinia'


// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
  // 其它配置项
  // 这里的id就是users,

})

​

创建store很简单，调用pinia中的defineStore函数即可，该函数接收两个参数：

• name：一个字符串，必传项，该store的唯一id。
• options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。

注意，如果使用模块化modules，首先modules文件夹的创建必不可少，其次就是记得在store的index.js中引入并导出 

import useLoginStore from "../store/modules/login.js"   //模块化其中之一
import useUsersStore from "../store/modules/user.js"    //模块化其中之一


export  {useLoginStore,useUsersStore}   //这里因为使用了模块化所以需要导出

示例

import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
const useUsersStore = defineStore('user', {
  // 其它配置项
})

expor