vuex的 State ，Mutation ，Action ，Getter ，Module用途，關係

序言發表於2020-10-28
Vue

描述一下vuex的 State ，Mutation ，Action ，Getter ，Module用途，關係，
分別舉例說明他們如何使用。

1.儲存資料 State 全域性資料 只要一更改，所有使用的地方都會發生改變
2.改變資料（同步）Mutation 通過 提交 commit 來更改 State
3.改變資料（非同步）Action 不能直接更改 需要通過 Mutation
4.計算資料 Getter 計算屬性 對 State 的更改 僅在使用處，不影響全域性
5.模板資料 Module 包含一套完整的 State，Mutation，Action，Getter,
可存在多個 Module 每個 Module 的 State，Mutation，Action，Getter 都是獨立的

因為  Mutation  中只能是同步操作，但是在實際的專案中，會有非同步操作; 那麼  Action  就是為了非同步操作而設定的。這樣，就變成了在 Action 中去提交 Mutation然後在元件的  methods  中去提交  Action ;  只是提交 Action 的時候使用的是 dispatch 函式，而 Mutation 則是用 commit 函式。

 五個部分並不是必須的，需要用到什麼就新增什麼。
 但是一般再怎麼簡單的 Vuex，也至少會由 State 和 Mutation 構成

// 呼叫 獲取 改變資料
// wx/getAppid 從 vuex 中呼叫 指定方法
// 在 vuex 中需要 dispatch 來觸發 actions 中的方法
store.dispatch(“wx/getAppid”, { domain: window.location.href }).then((res)=>{
// 輸出
console.log(res)
})

// 展示 資料
//

{{ wx.appid }}


// 匯入
// import { mapState } from “vuex”
// computed: {
// …mapState({
// wx: (state) => state.wx
// })
// }

// 倉庫 儲存 改變資料
// 匯入
import { getAppid } from “@/api/index”;
// 存放狀態 全域性變數
const state = {
appid: “”,
}

// state的計算屬性 通過getter中的方法來獲取state值
// 呼叫
// this.$store.getter.getappid
const getter ={
getappid(state){
return “APPId為：”+ state.appid
},
}
// 更改state中狀態的邏輯，同步操作
const mutations = {
SET_APPID: (state, appid) => {
state.appid = appid;
},
}

// 提交mutation，非同步操作
const actions = {
getAppid({ commit }, data) {
return new Promise((resolve, reject) => {
// 方法
getAppid(data)
.then((res) => {
// 修改資料 actions 中的 commit 可以觸發 mutations 中的方法
// state 的值只能通過 mutations 來修改
commit(“SET_APPID”, res.data.app_id);
// 將結果傳遞到呼叫的地方 否則呼叫的then沒有輸出
resolve(res);
})
.catch((err) => {
console.log(“失敗”);
reject(err);
});
});
},
}

// Module
// module 是為了將store拆分後的一個個模組，方便管理。
// 一個專案可存在多個 Module
// 每一個 module 中都會有一套專屬的 state getters mutations actions
// const module = {
// state: {},
// getters: {},
// mutations: {},
// actions: {}
// }

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章