javascript - Apabila menggunakan vuex untuk mengurus status komponen, ia agak mengelirukan di mana untuk menggunakan data dan kaedah, dan di mana untuk menggunakan keadaan, mutasi dan tindakan.

Question

Apabila menggunakan vuex untuk mengurus status komponen, agak mengelirukan tempat untuk menggunakan data, kaedah dan tempat untuk menggunakan keadaan, mutasi dan tindakan

Answer 1

vuex Sebenarnya, secara ringkas, ia adalah ruang nama global. Itu adalah pembolehubah global. Kemudian tindakan dan keadaan yang dikaitkan dengan vuex tersedia secara global.

Secara amnya apabila kita menulis komponen (sebenarnya komponen perniagaan, komponen berfungsi jarang menggunakan vuex), kita perlu memikirkan sama ada komponen perniagaan semasa mempunyai kaedah atau data yang perlu dihantar kepada komponen TAnya?

Contohnya:
Ada adegan sedemikian. Anggapkan bahawa terdapat sistem pengurusan dengan modul log masuk awam dan modul perniagaan yang melompat selepas log masuk.
Kemudian definisi modul log masuk akan menjadi seperti ini.

// 登陆模块
const state = {
    user: { } // 存储用户信息
}
const action = {
    login()   { ... }   // 调用API登陆
}   
const mutation = {
    setLogin(state, user){
        state.user = user
    }
}

Ditakrifkan dengan cara ini, log masuk(), pengguna boleh dipanggil di mana sahaja anda mahu memanggilnya.
Jika kaedah seperti ini, kita harus mentakrifkannya dalam vuex.

Sebaliknya, jika atribut anda hanya untuk digunakan di dalam komponen semasa, contohnya:

<p v-if="isShow">
    show...
</p>
<button @click="toggle">切换</button>

export default{
    data(){
        return { isShow: false }
    },
    method: {
        toggle(){
            this.isShow =  !this.isShow
        }
    }
}