Vue3---Pinia-状态管理（环境搭建安装及各属性使用教程）详细使用教程

目录

• • 初识 Pinia
  • 介绍
  • 环境搭建
  • getters 属性
  • actions 属性
  • Pinia 模块化
  • Pinia 解构 store
  • Pinia 数据持久化
  • SEO

初识 Pinia

vue 官方文档;https://cn.vuejs.org/guide/scaling-up/state-management.html#pinia
Pinia 官方文档;https://pinia.web3doc.top/

pinia;在英语中发音类似/peenya/;是和 pina;西班牙语的pineapple;最近接的词;pineapple是菠萝的意思;译者注;。刚好别人没有使用过这个包名。菠萝实际上是好多独立的花聚合在一起形成了一个水果。这和状态管理类似;每一个状态都是独立的;但是最后要把它们聚合在一起。

介绍

相信大家在 Vue2 中没少用 Vuex 状态管理库;但在 Vue3 中已经不建议使用了;而是使用更强的 Pinia;。

Pinia 它包括但不限于以下几点优势;

• Pinia 是 Vuex4 的升级版;也就是 Vuex5
• Pinia 极大的简化了Vuex的使用;是 Vue3的新的状态管理工具
• Pinia 对 ts的支持更好;性能更优; 体积更小;可用于 Vue2 和 Vue3
• Pinia 支持 Vue Devtools 工具;以及模块热更新和服务端渲染

另外;状态管理的核心属性相比于 Vue2 变化不大。

Vuex;State、Getters、Mutations;同步; 和 Actions;异步;。
Pinia;State、Getters 和 Actions(同步异步均支持)。

可以看到 Pinia 是将 Mutations 同步方法给去掉了;开发者可以随便同步或异步;它内部自己处理。

另外;Pinia 这几个属性的作用;相比 Vue2 变化基本无差异。

• State; 类似于组件中data;用于存储全局状态。
• Getters; 类似于组件中的 computed;根据已有的State封装派生数据;也具有缓存的特性。
• Actions; 类似于组件中的 methods;用于封装业务逻辑;同步异步均可以。

环境搭建

如果您的项目创建时没有携带 Pinia;那么您需要手动安装和配置。

我们先来安装 Pinia;咱们打开编辑器;在项目根目录执行命令。

cnpm install pinia -S

// 通过 pinia 提供的 defineStore 接口来创建一个状态管理实例
import { defineStore } from ;pinia;

// 第一个参数: 容器的ID(必须唯一) 后面Pinia会把所有的容器挂载到根容器
// 第二个参数;选项配置对象, state / getter / action
// 返回值;一个函数, 调用即可得到状态管理容器实例
export const store = defineStore(;main;, {
    // 这块vue2中是一个对象,但在这里必须是一个函数(箭头函数)
    // 为什么必须是函数呢? 在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 那又为什么是箭头函数呢? 为了TypeScript更好的类型推导
    // 另外也可以这么写: state: () => ({...})
    state: () => {
        return {
            title: ;比游戏还刺激——杰哥;
        }
    },
    getters:{},
    actions:{}
})

import { createApp } from ;vue;
import App from ;./App.vue;
import ;./index.css;

// 使用 createPinia 创建Pinia实例
import { createPinia } from ;pinia;

const app = createApp(App)

// use
app.use(createPinia())
app.mount(;#app;)

<template>
  <h1>
    {{ vuex.title }}
  </h1>
</template>

<!--
  setup语法糖(组件无需注册/数据和方法无需return/不用写setup()/...)
-->
<script setup>
import { store } from ;./store/index.js;
const vuex = store()
// Proxy
console.log(vuex)
</script>

// 通过 pinia 提供的 defineStore 接口来创建一个状态管理实例
import { defineStore } from ;pinia;

// 第一个参数: 容器的ID(必须唯一) 后面Pinia会把所有的容器挂载到根容器
// 第二个参数;选项配置对象, state / getter / action
// 返回值;一个函数, 调用即可得到状态管理容器实例
export const store = defineStore(;main;, {
    // 这块vue2中是一个对象,但在这里必须是一个函数(箭头函数)
    // 为什么必须是函数呢? 在服务端渲染的时候避免交叉请求导致的数据状态污染
    // 那又为什么是箭头函数呢? 为了TypeScript更好的类型推导
    // 另外也可以这么写: state: () => ({...})
    state: () => {
        return {
            num: 10
        }
    },

    // 其实这个就相当于组件中的 computed 计算属性
    // 也就是具有缓存的功能
    getters: {
        // 获取num*2的结果
        // 参数: state状态对象(看上面)
        getResult(state) {
            return state.num *= 2
        }
    },
    actions: {}
})

<template>
  <h1>
    {{ vuex.getResult }}
  </h1>
</template>

<!--
  setup语法糖(组件无需注册/数据和方法无需return/不用写setup()/...)
-->
<script setup>
import { store } from ;./store/index.js;
const vuex = store()
// Proxy
console.log(vuex)
</script>

import { defineStore } from ;pinia;
export const store = defineStore(;main;, {
    state: () => {
        return {
            // 多加一些数据
            num: 10,
            name: ;我是沙雕;,
            desc: ;高级前端工程师;
        }
    },
    getters: {},

    // 这个就相当于组件中的 methods 方法
    // 注意: 不能使用箭头函数来定义actions操作,因为箭头函数会绑定外部的this
    actions: {
        changeState() {
            // 比如要修改state中的name属性
            // 注意: 使用this.x来访问state数据
            this.name = ;你是沙雕;
        }
    }
})

<template>
  <h1>{{ vuex.name }}</h1>
  <button ;click=;go;>修改state值</button>
</template>

<script setup>
// 获取状态管理
import { store } from ;./store/index.js;
const vuex = store()

// 调用actions方法修改
const go = () => {
  vuex.changeState()
}
</script>

<template>
  <h1>{{ vuex.name }}</h1>
  <button ;click=;go;>修改state值</button>
</template>

<script setup>
// 获取状态管理
import { store } from ;./store/index.js;
const vuex = store()

// 调用actions方法修改
const go = () => {
  // state: 就是你现在脑子里想的这个state
  vuex.$patch(state => {
    // 可直接访问
    state.name = ;你是大沙雕;
  })
}
</script>

<template>
  <h1>{{ vuex.name }}</h1>
  <h1>{{ vuex.desc }}</h1>
  <button ;click=;go;>修改state值</button>
</template>

<script setup>
// 获取状态管理
import { store } from ;./store/index.js;
const vuex = store()

// 调用actions方法修改
const go = () => {
  // state: 就是你现在脑子里想的这个state
  vuex.$patch(state => {
    // 批量修改数据
    state.name = ;我是大沙雕;
    state.desc = ;混凝土瞬间移动工程师;搬砖的;;
  })
}
</script>