目次
序文：
Pinia は Vue 専用の状態管理ライブラリで、Vuex と同様に、コンポーネントまたはページ間で状態を共有できます。Vue の別の状態管理ソリューションであり、Vue2 と Vue3 をサポートしています。
1.ピニアとは何ですか?
Vuex が主に Vue2 で状態管理の役割を果たしていることは誰もが知っています。いわゆる状態管理は単にデータを保存する場所です。Vuex に保存されたデータはさまざまなコンポーネントからアクセスできます。これは Vue エコロジーの重要な部分です.コンポーネント。
Vue3 では、従来の Vuex を使用して状態管理を実装することも、最新の pinia を使用して状態管理を実装することもできます。
2. ピニアの利点
- Vue2 と Vue3 の両方をサポート
- pinia のアクションは同期と非同期をサポートしていますが、Vuex はサポートしていません
- 優れた Typescript サポート
- 容量は非常に小さく、わずか1KB程度です
- pinia は独自の機能を拡張するプラグインをサポートしています
- piniaにはstate、getter、actionしかなく、VuexのMutationは放棄されています
3.ピニアをインストールする
# 使用 npm
npm install pinia
# 使用 yarn
yarn add pinia
4. piniaの基本的な使い方と概念
4.1 準備
main.jsを修正し、piniaが提供するcreatePiniaメソッドをインポートし、ルートストレージを作成します。
// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//引入pinia中的createPinia方法
import {createPinia} from "pinia"
//创建根储存
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app')
4.2ストア
ストアとはデータ ウェアハウスを意味し、データはストアに保存され、読み書き可能です。
//src/store/goods.js
//引入函数
import { defineStore } from "pinia";
// 调用defineStore函数创建Store 实体
export const goodsStore = defineStore('users', {
})ストアエンティティを作成するdefineStore関数には2つのパラメータ値があります
- 名前: 文字列、必須項目、ストアの一意の ID。
- オプション: オブジェクト、ストア設定項目 (状態など)。
4.3 状態の追加
保存する必要があるデータは、state 属性に配置されます。
//src/store/goods.js
import { defineStore } from "pinia";
export const goodsStore = defineStore('users', {
// state
state: () => {
return {
goods:["商品1","商品2"]
}
},
})4.4 ストアの使用
現時点では、ストア内の構成アイテムの状態にデータがあり、それを使用できます
//App.vue
<script setup>
import {goodsStore} from "./store/store";
const store = goodsStore()
console.log(store)
</script>先ほど入っていた商品データを印刷します。
データをインポートする際、修正時に応答性が失われないように、piniaにstoreToRefs関数を導入します。
<script setup>
import {goodsStore} from "./store/store";
import { reactive } from "vue";
import {storeToRefs} from 'pinia'
const store = goodsStore()
const {goods} = storeToRefs(store)
</script>
<template>
<div>
<ul>
<li v-for="(item,index) in goods" :key="index">
{
{ item }}
</li>
</ul>
</div>
</template>結果：この時点で店舗倉庫内のデータを取得
4.5 データの変更
単一のデータを変更する
const updataGoods=()=>{
store.goods[0] = "西瓜"
}$patch : 複数行のデータを変更します
const path = ()=>{
store.$patch({
goods:["西瓜","兰花"]
})
}$state : データがある場合は変更および置換、データがない場合は増加します
const stata = ()=>{
store.$state = {
name:"wjd",
age:"289"
}
}4.6 データのリセット
データを変更し、元のデータに戻す必要がある場合、この時点で $reset() メソッドを使用できます。
const reset = () => {
store.$reset();
}5.ゲッター属性
ゲッターは Vue の計算プロパティに相当し、その機能は新しい結果を返すことです。
//src/store/goods.js
export const goodsStore = defineStore('users', {
// state
state: () => {
return {
goods:["商品1","商品2"],
list : ["手机","电脑"]
}
},
getters:{
getGoods(state){
return state.goods[0] + state.list[0]
}
}
})ページ内でゲッターを使用する
//app.vue
<template>
<div>
<ul>
<li v-for="(item,index) in goods" :key="index">
{
{ item }}
</li>
//使用使用这样的方式
{
{ store.getGoods }}
</ul>
</div>
</template>パラメータを渡すゲッター
//src/store/goods.js
export const goodsStore = defineStore('users', {
// state
state: () => {
return {
goods:["商品1","商品2"],
list : ["手机","电脑"]
}
},
getters:{
getGoods(state){
return state.goods[0] + state.list[0]
},
//返回一个函数在调用的时候直接传递参数
getass(state){
return (num)=>{
return num + state.goods[0]
}
}
}
})
//app.js 中调用
{
{ store.getass("1：") }}6. アクションプロパティ
Action はコンポーネント内のメソッドに相当し、ビジネス ロジックを処理するためのメソッドを配置するために使用されます。ビジネス コードがある場合は、Action に記述するのが最適です。
export const goodsStore = defineStore('users', {
// state
state: () => {
return {
goods:["商品1","商品2"],
list : ["手机","电脑"]
}
},
getters:{
getGoods(state){
return state.goods[0] + state.list[0]
},
getass(state){
return (num)=>{
return num + state.goods[0]
}
}
},
actions:{
setList(){
//通过this.xx 访问相应状态
this.list = [
"麻将",
"扑克"
]
}
}
})ページ内で使用する
//app.vue
<script setup>
import {goodsStore} from "./store/store";
import { reactive } from "vue";
import {storeToRefs} from 'pinia'
const store = goodsStore()
const {goods} = storeToRefs(store)
store.setList()
</script>7. すべてのコード
//main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {createPinia} from "pinia"
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app')
// src/store/store.js
import { defineStore } from "pinia";
// 调用defineStore函数创建Store 实体
export const goodsStore = defineStore('users', {
// state
state: () => {
return {
goods:["商品1","商品2"],
list : ["手机","电脑"]
}
},
getters:{
getGoods(state){
return state.goods[0] + state.list[0]
},
getass(state){
return (num)=>{
return num + state.goods[0]
}
}
},
actions:{
setList(){
this.list = [
"麻将",
"扑克"
]
}
}
})
//app.vue
<script setup>
import {goodsStore} from "./store/store";
import { reactive } from "vue";
import {storeToRefs} from 'pinia'
const store = goodsStore()
const {goods} = storeToRefs(store)
const updataGoods=()=>{
store.goods[0] = "西瓜"
}
const reset = () => {
store.$reset();
}
const path = ()=>{
store.$patch({
goods:["西瓜","兰花"]
})
}
const stata = ()=>{
store.$state = {
name:"wjd",
age:"289"
}
}
store.setList()
</script>
<template>
<div>
<ul>
<li v-for="(item,index) in goods" :key="index">
{
{ item }}
</li>
<button @click="updataGoods">修改</button>
<button @click="reset">重置</button>
<button @click="path">批量</button>
<button @click="stata">覆盖修改</button>
{
{ store.getass("1：") }}
</ul>
</div>
</template>
<style scoped>
div{
width: 100vw;
height: 100%;
}
li{
list-style: none;
}
</style>要約:
Vuex に比べて、Pinia は知識ポイントが少なく、シンプルであり、自由に拡張でき、より便利に使用できます。