一、在組件中讀取 vuex 中的數據

$store.state.sum;

二、組件中修改 vuex 中的數據

$store.dispatch('actions fn name', 數據) $store.commit('mutations fn name', 數據)

如果沒有網絡請求或者其他業務邏輯，組件中也可以越過 actions（不寫 dispatch 直接寫 commit

三、getters 的使用

// 準備 state 用于存儲數據 const state = {sum: 1, };// 加工 state 里面的數據 類似 data 和 computed 的關系 const getters = {bigSum(state) {return state.sum * 10;}, };

組件中讀取數據：$store.getters.bigSum

四、mapState 方法

// 映射 state 中的數據為計算屬性 computed: {// 對象寫法...mapState({key: 'value'}),// 數組的寫法 當 key == value ...mapState(['key']), },

五、mapGetters 方法

// 映射 getters 中的數據為計算屬性 computed: {// 對象寫法...mapGetters({ key: "value" }),// 數組寫法...mapGetters(["key"]), },

六、mapActions 方法

// 簡寫 $store.dispatch(xxx) methods: {...mapActions({ key: "value"}),...mapActions(["key"]), },

七、mapMutations 方法

// 簡寫 $store.commit(xxx) methods: {...mapMutations({key: 'value'}),...mapMutations(['key']), }, 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vuex 状态管理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。