pinia基本使用

在vue3组合式工程化使用pinai

---

什么是pinia

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案

1. 通俗易懂的讲解，多个组件中需要共享一些参数时，将这些要共享的参数存到一个仓库当中，当存到这个仓库中，无论哪个组件都可以使用，这就是状态管理库
2. 比如qq登录，当我登录了我的账号时，进入里面的界面，也可以看到我的账号信息，就是把共享的数据存到一个仓库中，想用的时候直接从仓库中获取

安装

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

在mian.js中导入pinia

1. 关键字:createPinia

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import {createPinia} from "pinia";//这里导入pinia

createApp(App).use(store).use(router).use(createPinia()).mount('#app') //use(createPinia)引入pinia

//也可以换种写法

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import {createPinia} from "pinia";//这里导入pinia

const pinia = createPinia();//创建pinia
createApp(App).use(store).use(router).use(pinia).mount('#app') //use(createPinia)引入pinia

在store文件夹创建index.js

1. 在src目录下如果没有store文件夹，则创建一个store文件夹，在创建index.js文件（也可以是别的名字）
2. 如果有则直接找到index.js文件
3. 这个index.js就是状态管理库文件了

在index.js中定义store

关键字: defineStrore

1. store就是状态管理库，你要将共享的数据存在store中
2. defineStroe（）函数，

1. 1. 第一个参数为这个store（模块的名称），你只要记住他是一个名称，且不能有相同的名称，唯一的
   2. 第二个参数为store(模块配置对象),这个对象包含 state、actions 与 getters这几个属性，后面会讲解如何使用

import {defineStore} from "pinia"; //导入pinia

//选项式定义
export const useCounterstate = defineStore('counter',{	
  //这里存放共享值，以及对共享值的一些列操作
})
  

 //组合式定义 
  export const useCounterstate = defineStore('counter',() => {	
  //这里存放共享值，以及对共享值的一些列操作
})

  //两种写法，自己选一种就好了
  //定义完了store之后将这个定义公开(export)出去，就可以让组件使用

---

模块配置对象state

关键字：state

1. 如何将共享的数据存放在store状态管理库中
2. state相当于组件中的data，大白话来说就是将你要共享的参数写在state函数对象中
3. 案例：

import {defineStore} from "pinia";

export const useCounterState = defineStore('counter',{
  state: () => {
    return {	//将要共享的参数写在下面(count,name)
      count : 0,
      name : '张三'
    }
  },
});

获取state

关建步骤 : 先将那边定义完成的store获取，在通过store获取共享参数

1. 上面的既然已经将要共享的属性放在了state中，那我组件想使用里面的共享参数

//这是index.js 
import {defineStore} from "pinia";


//这里我是不是定义了一个变量(useCounterState)来存store,记住这个名称
export const useCounterState = defineStore('counter',{
  state: () => {
    return {	//将要共享的参数写在下面(count,name)
      count : 0,
      name : '张三'
    }
  },
});



//User组件获取共享参数

<template>
  //这里使用模板字符串来显示共享的值，显示的结果为张三
  {{counter.name}}
	{{counter.count}}//这里显示0
</template>

<script setup>//这里是组合式
  //导入index.js文件
import {useCounterState} from "@/store";

  //通过上面定义的变量名称来获取store
  const counter = userCounterState();//为什么有括号，因为上面存的式一个defineStore函数
</script>

修改state

1. 下面的使用方式并不会直接修改store中的state值，他的初始值不变

// 修改state几种方式

//index.js文件
//这里我是不是定义了一个变量(useCounterState)来存store,记住这个名称
export const useCounterState = defineStore('counter',{
  state: () => {
    return {	//将要共享的参数写在下面(count,name)
      count : 0,
      name : '张三'
    }
  },
});

//第一种直接修改updateCount方法种
//组件a使用共享数据并修改
<template>
  <div>
    a页面
    <button @click="updateCount">修改count值</button>
    count值为:{{store.count}}
  </div>
</template>

<script setup>
import {useCounterStore} from "@/store";
//获取store实例
const store = useCounterStore();

//直接修改count值
const updateCount = function () {
  store.count++;
}
</script>

第二种

//第二种
使用关键字:$patch方法批量修改，就是可以同时修改多个共享数据
还是使用上面的index文件

//a组件使用共享数据并修改
<template>
  <div>
    a页面
    <button @click="updateCount">修改共享count和name数据</button>
    count值为:{{store.count}}
    name值为:{{store.name}}
  </div>
</template>

<script setup>
import {useCounterStore} from "@/store";

//获取store实例
const store = useCounterStore();


//通过pinia中的$patch实现批量修改count和name共享数据
const updateCount = function () {
  store.$patch({
    count: 20,
    name: '赵六'
  })
}
</script>

第三种

//第三种
关键句：$patch((state)=>{})
state表示所有共享参数的值  

<template>
  <div>
    a页面
    <button @click="updateCount">修改共享count和name数据</button>
    count值为:{{store.count}}
    name值为:{{store.name}}
  </div>
</template>

<script setup>
import {useCounterStore} from "@/store";

//获取store实例
const store = useCounterStore();

//通过patch中函数的形式批量修改共享数据
const updateCount = function () {
  store.$patch((state)=> {
    state.name ='王五';
    state.count = 30;
  })
}
</script>

第四种

1. 关键字:actions中定义函数来修改
2. actions相当于vue中method就是函数

export const useCounterStore = defineStore('counter',{
  state: () => {
    return {
      count : 15,
      name : '张三'
    }
  },
  //在actions
  actions: {
    updateCount () {
      this.count++;
    }
  }
});


//a组件使用共享数据并修改
<template>
  <div>
    a页面
    // 这里调用了store中的action中的updateCount方法
    <button @click="store.updateCount()">修改共享count值</button>
    count值：{{store.count}}
  </div>
</template>

<script setup>
import {useCounterStore} from "@/store";

const store = useCounterStore();

</script>

模块配置对象Getter

1. 关键字: getters
2. 相当于computed计算属性
3. getter中的可以定义许多计算方法
4. 他的第一个值为store，这个值可以理解为所有的共享参数，通过这个参数可以获取你所想要的共享参数
5. 计算函数启动项目会执行一次（有缓存），当关联的state中的数据改变又会执行一次

//index.js
export const useCounterStore = defineStore('counter',{
  state: () => {
    return {
      count : 15,//count值为15
      name : '张三'
    }	
  },
  getters: {
    //定义了sum计算属性，当count初始值变为20的时候执行这个函数
    sum: (state) => {return state.count + 10}
  }
});


//a组件通过store访问sum计算函数
<template>
  <div>
    a页面
    <button @click="store.updateCount">修改共享count值为20</button>
    <button>{{store.sum}}值</button>

  </div>
</template>

<script setup>
import {useCounterStore} from "@/store";
//获取store实例
const store = useCounterStore();


</script>

模板配置对象Action

1. action相当于组件中method，它们可以通过 defineStore() 中的 actions 属性来定义

//index.js
export const useCounterStore = defineStore('counter',{
  state: () => {
    return {
      count : 15,//count值为15
      name : '张三'
    }
  },
  actions: {
    //定义函数修改count值
    updateCount () {
     this.count++;
    }
  },
});


//a页面调用
<template>
  <div>
    a页面

    {{store.count}}
    <button @click="store.updateCount()">修改值</button>

  </div>
</template>

<script setup>
import {useCounterStore} from "@/store";
//获取store实例
const store = useCounterStore();

</script>

缺点：

使用pinia来存储共享数据有一个缺点，当页面刷新的时候，所有的共享数据都会变为一开始的初始值

为了解决这个问题就要用到pinia持久化插件了