Cara menggunakan alat pengurusan keadaan pinia Vue3-View.js-php.cn

Cara menggunakan alat pengurusan keadaan pinia Vue3

WBOY

Lepaskan： 2023-06-03 13:09:39

ke hadapan

1102 orang telah melayarinya

Apakah pinia?

Ini ialah alat pengurusan keadaan baharu untuk vue3, ia setara dengan vuex sebelumnya. Ia juga menyokong vue2. Kerana logonya kelihatan seperti nanas, kami juga memanggilnya Big Pineapple.

Ini adalah vue3 alat pengurusan status baharu, ia bersamaan dengan vuex sebelumnya, tetapi juga menyokong Mutations. Kerana logonya kelihatan seperti nanas, kami juga memanggilnya Big Pineapple. vue2

Arahan pemasangan

npm i pinia

Salin selepas log masuk

Gunakan

1 Perkenalkan

dalam mian.js, daftar secara global pinia

import { createApp } from &#39;vue&#39;
import { createPinia } from &#39;pinia&#39;
import App from &#39;./App.vue&#39;
 
const app = createApp(App)
app.use(createPinia())
app.mount(&#39;#app&#39;)

Salin selepas log masuk

2. Buat folder kedai baharu

🎜 > Fail, jika anda menyokong TS, anda boleh mencipta index.js, memperkenalkan index.ts ke dalam fail dan menggunakannya untuk menyimpan keadaan pinia

import {defineStore} from &#39;pinia&#39;
export const useUserStore = defineStore("USER",{
    state() {
        return {
            name: &#39;景天&#39;,
            age: 18,
            name1: &#39;胡歌&#39;,
            age1: 36
        }
    },
    // 和vuex一样
    getters: {
 
    },
    // 和vuex一样
    actions: {
        setAge() {
            this.age--
        }
    }
})

Salin selepas log masuk

3 Gunakan keadaan yang disimpan dalam

dalam halaman pinia

<template>
    <div>正常取值</div>
    <div>{{User.name}}</div>
    <div>{{User.age}}</div>
    <div>解构取值</div>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>解构取值转ref</div>
    <div>{{name1}}</div>
    <div>{{age1}}</div>
    <button @click="change1">change1</button>
    <button @click="change2">change2</button>
    <button @click="change3">change3</button>
    <button @click="change4">change4</button>
    <button @click="change5">change5</button>
    <div>
        <button @click="handleReset">重置</button>
    </div>
</template>
 
<script setup lang="ts">
import { storeToRefs } from &#39;pinia&#39;;
import { useUserStore } from &#39;./store&#39;;
 
// 获取store中的值
let User = useUserStore()
 
// 通过ES6的结构取值，但是这个值不是响应式的
let {name,age} = User
 
// 通过pinia自带的方法，转换成ref，就是响应式的了
let {name1,age1} = storeToRefs(User)
 
// 改变store中值的方式有五种
// 方式一
function change1() {
    User.age++
}
// 方式二，可一次性修改多个值，对象的形式
function change2() {
    User.$patch({
        name: &#39;雪见&#39;,
        age: 17
    })
}
// 方式三，可一次性修改多个值，函数的形式
function change3() {
    User.$patch((state) => {
        state.name = &#39;徐长卿&#39;
        state.age = 19
    })
}
// 方式四，哪怕修改一个值，也要传所有值？？？
function change4() {
    User.$state = {
        name: &#39;茂茂&#39;,
        age: 16,
        name1: &#39;李逍遥&#39;,
        age1: 18
    }
}
// 方式五，借助actions
function change5() {
    User.setAge()
    //也可以传参
    // User.setAge(999)
}
 
// 重置数据
function handleReset() {
    User.$reset()
}
 
</script>
 
<style>
</style>

Salin selepas log masuk

Atas ialah kandungan terperinci Cara menggunakan alat pengurusan keadaan pinia Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Cara menggunakan alat pengurusan keadaan pinia Vue3

Apakah pinia?

npm i piniaSalin selepas log masuk

npm i pinia
Salin selepas log masuk