©2020-2024 ioDraw All rights reserved,
Privacy Policy
pinia中使用要比Vuex简单。Vuex中有state、mutations、getters、actions、modules五种， 而
pinia中只有state、getters、actions。写法上有些不同。还是相对Vuex简单的
安装
yarn add pinia # or with npm npm install pinia
main.js
import { createApp } from 'vue' import App from './App.vue' import {
createPinia } from 'pinia' const pinia = createPinia() createApp(App)
.use(pinia) .mount('#app')
在src下新建store/index.js
因为没有Vuex中的modules了，其实这个新建的index.js就相当于是一个模块了 ,有其他模块
可以继续创建，只要为每个模块指定唯一的ID就可以了（就是defineStore中第一个参数）
import { defineStore } from 'pinia' /** * 1. 定义并导出容器 * 参数1： 容器的 ID , 必须唯一， 将来
Pinia 会把所有的容器挂载到跟容器 * 参数2： 选项对象 * 返回值： 一个函数, 调用得到容器实例 */ export const
useIndexStore = defineStore('index', { /** * 类似于组件的data, 用来存储全局状态 * 1.
必须是函数，这样是为了在服务端渲染的时候避免交叉请求导致的数据状态渲染 * 2. 必须是箭头函数, 这是为了更好的 TS 类型推导 */ state: ()
=> { return { count: 100, quantity: 10 } }, /** * 类似于组件的computed, 用来封装计算属性,
有缓存的功能 */ getters: { // 接受一个可选参数 state 即 当前ID为index的Store实例 也可以用this 拿到
上面的state的状态值 countTotal(state) { return state.count * state.quantity } }, /** *
类似于组件的 methods 封装业务逻辑, 修改state * 通过 this 拿到上面 state的状态值 */ actions: {
countChange(val) { console.log(val,'actions中的参数--->>>>') this.count++
this.quantity++ // or // this.$patch({}) // this.$patch(state => {}) } } })
组件中使用
<template> count: {{indexStore.count}} quantity: {{indexStore.quantity}}
countTotal: {{indexStore.countTotal}} <hr> count: {{count}} quantity: {
{quantity}} countTotal: {{countTotal}} <hr> <el-button type="primary"
@click="indexStoreChange">修改state数据</el-button> </template> <script setup>
import { useIndexStore } from '@/store' import { storeToRefs } from 'pinia' //
state、getters、actions 里面属性或者方法 都是通过 indexStore “点” 出来使用的 const indexStore =
useIndexStore() // 如果想将状态数据结构出来直接使用 必须引入storeToRefs（否则不是响应式） 来自于 pinia（类似于
reactive响应式，结构使用toRefs） const { count, quantity, countTotal } =
storeToRefs(indexStore) // 修改state中的数据 const indexStoreChange = () => { // //
方式一： 最简单的方式就是这样 // indexStore.count++ // indexStore.quantity++ // //
方式二：如果修改多个数据，建议使用 $patch 批量更新 // indexStore.$patch({ // count: indexStore.count
+ 1, // quantity: indexStore.quantity + 1 // }) // // 方式三（推荐都使用这个就好）：
更好的批量更新的方式： $patch 一个函数 这种性能更好 // indexStore.$patch(state => { // state.count++
// state.quantity++ // }) // 方式四： 逻辑比较多的时候 可以状态到 actions 中 调用 actions中的方法处理
indexStore.countChange() } </script> <style scoped> </style>