Pinia状况办理

最初是作为一个试验为 Vue从头设计状况办理，让它用起来像组合式API

Pinia和Vuex的对比

  • 为什么要用 Pinia
    • Pinia最初是为了 探究Vuex的下一次迭代会是什么样子，结合了 Vuex5中心团队讨论中的许多想法
    • 终究，团队意识到 Pinia已经完成了Vuex5中大部分的内容，所以终究决定 运用Pinia来替代Vuex
    • 与Vuex比较，Pinia提供了一个愈加简单的API，具有更少的仪式，提供了 Composition-API风格的API
    • 最重要的是，能够更好的支持TypeScript
  • 与Vuex比较，Pinia的优势
    • 比方mutations不再存在
    • 更友爱的支持TypeScript
    • 不再有modules
    • 不再有命名空间的概念，不需要记住杂乱的关系

怎么运用Pinia

  • 首要经过 npm install pinia安装pinia
  • 安装完成后，在src文件夹下面创立store文件夹
  • 创立index.js的入口文件
import { createPinia } from "pinia";
export default createPinia();
  • 在main.js运用pinia插件
import { createApp } from "vue";
import App from "./App.vue";
import pinia from "./store";
const app = createApp(App);
app.use(pinia);
app.mount("#app");
  • 在store文件夹下面创立不同的store
    • 创立一个counter.js的store文件，用于保存计数的状况
import { defineStore } from "pinia";
//defineStore创立store，能够创立多个store
//第一个参数是用于命名store的
//第二个参数是store的详细内容
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
});
//回来值是一个函数，将函数露出出去
export default useCounter;
  • 然后在详细的组件中引进露出的函数，完成调用即可
<template>
  <!-- 直接拜访store中的变量即可 -->
  {{ counterStore.count }}
</template>
<script setup>
//引进露出的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();
</script>
<style scoped></style>

知道Store

  • 什么是Store
    • 一个store（如pinia）是一个实体（经过defineStore()创立），它会持有组件树种的 状况和事务逻辑（事务逻辑主要是网络请求等内容），也就是保存了全局的状况
    • 有点像始终存在，并且 每个人都能够读取和写入的组件
    • 能够在项目种，界说 任意数量的Store来办理状况
  • Stroe有三个中心概念
    • state、getters、actions
    • 等同于组件的 data、computed、methods
    • 一旦 store被实例化，能够直接在store上拜访 state、getters、actions种界说的任何特点

界说一个store

在上面的例子中有讲过store的界说

  • 运用 defineStore进行界说
    • 第一个参数：是store的仅有名称，也成为id，是必要的
    • 第二个参数是详细的store对象
  • 回来的函数同一运用useX进行命名
import { defineStore } from "pinia";
//defineStore创立store，能够创立多个store
//第一个参数是用于命名store的
//第二个参数是store的详细内容
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
});
//回来值是一个函数，将函数露出出去
export default useCounter;

知道和界说State

  • state是store的中心部分
import { defineStore } from "pinia";
//defineStore创立store，能够创立多个store
//第一个参数是用于命名store的
//第二个参数是store的详细内容
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
});
//回来值是一个函数，将函数露出出去
export default useCounter;

操作State

  • 读取和写入state：
    • 默许情况下，能够经过store实例拜访状况来直接读取和写入状况
//引进露出的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();
//读取
counterStore.count
//修正
counterStore.count++
  • 重置State
    • 能够经过调用store上的**$reset()**办法讲状况重置到初始值
//引进露出的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();
counterStore.$reset()//会将counter康复到初始界说的状况
  • 一次性修正多个State
    • 经过 $patch 
//引进露出的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();
counterStore.$patch({
    name:"zhangcheng",
    age:"18"
})
  • 替换state
    • 经过 $state办法进行替换 
//引进露出的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();
counterStore.$state = {
    name:"zhangcheng",
    age:"18"
}

知道和界说Getters

  • 根本运用，获取本store实例下的state
import { defineStore } from "pinia";
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
  getters:{
      doubleCount(state){
          //经过传参的办法进行拜访
          return state.count
      },
      doubleCountAddOne(){
          //能够经过this进行拜访
          return this.count*2+1
      }
  }
});
//回来值是一个函数，将函数露出出去
export default useCounter;
//运用办法同state，先引进露出的函数，执行，经过.的办法进行拜访
  • 运用getters中的数据
    • 能够经过 this直接拜访
import { defineStore } from "pinia";
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
  getters:{
      doubleCount(state){
          //经过传参的办法进行拜访
          return state.count
      },
      doubleCountAddOne(){
          //能够经过this拜访getters中的变量
          return this.doubleCount+1
      }
  }
});
//回来值是一个函数，将函数露出出去
export default useCounter;
  • 用到其他store中的数据
import { defineStore } from "pinia";
//引进其他的store
import userInfo from "./store/user.js";
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
  getters:{
      getMessage(){
          //实例化然后运用
          const userStore = userInfo()
          return userInfo.name + count
      }
  }
});
//回来值是一个函数，将函数露出出去
export default useCounter;

知道和界说Actions

  • Actions相当于组件中的methods
  • 与getters一样，能够经过this拜访store中的变量，但是没有传入state参数 
import { defineStore } from "pinia";
//引进其他的store
import userInfo from "./store/user.js";
const useCounter = defineStore("counter", {
  state: () => ({
    count: 199,
  }),
	actions:{
        countAdd(num){
            //能够传入参数
            //直接经过this进行拜访state中的状况
            this.count += num
        }
    }
});
//详细运用
//引进露出的store函数
import useCounter from "./store/counter.js";
const counterStore = useCounter();
//直接调用办法即可
counterStore.countAdd(10)

执行异步操作

import { defineStore } from "pinia";
//引进其他的store
import userInfo from "./store/user.js";
const useCounter = defineStore("counter", {
	actions:{
      async getData(){
          const res = await fetch(xxxx)
          const data = await res.json()
          //改变state状况
          this.list = data
          //回来data
          retrun data
      }
    }
});