javascript – Bei der Verwendung von Vuex zum Verwalten des Komponentenstatus ist es etwas verwirrend, wo Daten und Methoden sowie Status, Mutation und Aktionen verwendet werden sollen.

Question

Bei der Verwendung von Vuex zum Verwalten des Komponentenstatus ist es etwas verwirrend, wo Daten, Methoden und wo Status, Mutation und Aktionen verwendet werden sollen

Answer 1

vuex 其实，通俗点理解就是个全局命名空间。也就是个全局变量。那么挂到vuex 里面的action,state 也就是全局都可用。

一般我们在写组件的时候（其实是业务组件，功能组件很少用vuex），搞清楚当前业务组件有方法或者数据需要传递到其TA组件去吗？

举个例子：
有这么一个场景。假定 有个管理系统，有公共的登陆模块、登陆后跳转的业务模块。
那么登陆模块的定义就会是这样的。

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

这样定义，login(),user 可以在任何想要调用的地方调用。
如果是这类方法，我们就应该定义到vuex 里面。

反之，如果你的属性只是为了在当前组件内部用，例如：

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

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