序文
- Vue3とPiniaの基本的な使い方を記録します。
- シンプルなデータ状態制御を可能にします
1. 事前準備
2. ステップを使用する
1. vite を使用して vue3 プロジェクトを作成する
npm init vite@latest
- 选择vue — vue-ts
- pnpm 依存関係をインストールします
- pnpm run dev は初期化プロジェクトを開始します
安装pinia :pnpm i pinia
2.ピニアの初期化
import {
createApp } from "vue";
import {
createPinia } from "pinia";
import "./style.css";
import App from "./App.vue";
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount("#app");
src の下に、store/index.ts の基本フレームワークを作成します。
import {
defineStore } from "pinia";
export const useFirstStore = defineStore("first", {
actions: {
},
getters: {
},
state: () => {
return {
};
},
});
import {
defineStore } from "pinia";
export const useMainStore = defineStore("main", {
state: () => {
return {
count: 1,
foo: "2",
arr: [1, 2],
};
},
getters: {
count10(): number {
console.log("相当于computed,一来就调用");
return this.count++;
},
},
actions: {
changeState(num: number) {
this.count += num;
this.foo = "zwt2";
this.arr.push(666);
},
},
});
3. コンポーネントの使用法
- HelloWord.vue を次のように変更します。
- 4つのボタンにはそれぞれ使い方や注意事項が異なります
<template>
<div style="text-align: left">
<h2>Pinia Test</h2>
<ul>
<li v-for="b in buttonContent">{
{
b.id }}——{
{
b.content }}</li>
</ul>
普通方式获取count:{
{
mainStore.count }}
<hr />
使用storeToRefs获得响应式数据:{
{
count }}
<hr />
<button @click="add">Button1</button>
{
{
count }}
<hr />
<button @click="addSome">Button2</button>
参数1: {
{
count }}—— 参数2: {
{
foo }}
<hr />
<button @click="addArr">Button3</button>
参数1: {
{
count }}—— 参数2: {
{
foo }}—— 参数3:{
{
arr }}
<hr />
<button @click="changeInActions">Button4</button>
参数1: {
{
count }}—— 参数2: {
{
foo }}—— 参数3:{
{
arr }}
<hr />
<h2>{
{
mainStore.count10 }}</h2>
<!-- <h2>{
{
mainStore.count11 }}</h2> -->
</div>
</template>
<script setup lang="ts">
import {
useMainStore } from "../store";
import {
storeToRefs } from "pinia";
import {
ref } from "vue";
const buttonContent = ref([
{
id: "button1",
content: "修改state单个数据(用storeToRefs获得响应式数据)",
},
{
id: "button2", content: "使用$patch修改state多个数据" },
{
id: "button3", content: "使用$patch函数方式直接修改state数据" },
{
id: "button4", content: "使用封装在actions中的方法修改state数据" },
]);
const mainStore = useMainStore();
console.log(mainStore);
const {
count, foo, arr } = storeToRefs(mainStore);
const add = () => {
count.value++;
};
const addSome = () => {
mainStore.$patch({
count: count.value + 9,
foo: foo.value + 12,
});
};
const addArr = () => {
mainStore.$patch((state) => {
state.count++;
state.foo = "添加数组成功";
state.arr.push(8);
});
};
const changeInActions = () => {
mainStore.changeState(12);
};
</script>
<style scoped>
button {
background-color: #bfa;
}
</style>
4.エフェクト表示
要約する
- 各データ ロジック間の呼び出し関係についてさらに検討する
- ts 構文は型変換に注意してください
- storeToRefs は、状態内のデータを応答性の高いデータに変更し、それをテンプレート内で直接使用できます。
- 詳細な内容については、詳細な説明についてのメモを参照してください