javascript - Lorsque vous utilisez Vuex pour gérer l'état des composants, il est un peu déroutant de savoir où utiliser les données et la méthode, et où utiliser l'état, la mutation et les actions.

Question

Lorsque vous utilisez vuex pour gérer l'état des composants, il est un peu difficile de savoir où utiliser les données, la méthode et où utiliser l'état, la mutation et les actions

Answer 1

vuex En fait, en termes simples, il s'agit d'un espace de noms global. C'est une variable globale. Ensuite les actions et états liés à vuex sont disponibles globalement.

Généralement, lorsque nous écrivons des composants (en fait des composants métier, les composants fonctionnels utilisent rarement vuex), nous devons déterminer si le composant métier actuel a des méthodes ou des données qui doivent être transmises à son composant TA ?

Par exemple :
Il existe une telle scène. Supposons qu'il existe un système de gestion avec un module de connexion public et un module métier qui saute après la connexion.
Ensuite, la définition du module de connexion sera comme ceci.

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

Défini de cette manière, login(), l'utilisateur peut être appelé partout où vous souhaitez l'appeler.
Si c'est ce genre de méthode, il faudrait la définir dans vuex.

Au contraire, si votre attribut est uniquement destiné à être utilisé à l'intérieur du composant courant, par exemple :

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

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