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 協議》,轉載必須註明作者和本文連結