javascript - 用vuex管理元件狀態的時候，什麼地方用data,method,什麼地方用state,mutation,actions,有點亂了

Question

用vuex管理元件狀態的時候，什麼地方用data,method,什麼地方用state,mutation,actions,有點亂了

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
        }
    }
}