技術標籤：vueJS

Vuex 狀態管理

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化.

vuex5大核心

state、Getters、Mutations、Actions、Modules

vuex工作樹（src> store > modules）

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import userInfo from './modules/userResource'
import websocketStore from './modules/websocketStore'
 

Vue.use(Vuex);
const store = new Vuex.Store({
    modules: {
      userInfo,
      websocketStore
    }
  }) 
export default store

userResource.js

import { getStore, removeAll, removeStore, setStore } from '../../utils/storage';
import { getUserResource } from '../../api/resourceManage';
import { getUnitT }
 
 from '@/api/flowInterface';
//單一狀態樹 僅僅包含一個 store 例項 state
const state = {
    flowData:[]
}
//更改 Vuex 的 store 中的狀態(state)的唯一方法是提交 mutation
const mutations = {
    SET_FLOW_CHANGE(state, data) {
        state.flowData = []
        data.filter((item, index) => {
            state.flowData.push({
                name: item.unitName,
                y: 100 - (item.unitOccupyFlow / item.unitTotal).toFixed(2) * 100,
                total: item.unitTotal,
                occupyFlow: item.unitOccupyFlow,
                id: item.id
            });
        });
    }
}
//Action 類似於 mutation，不同在於：
//Action 提交的是 mutation，而不是直接變更狀態。
//Action 可以包含任意非同步操作。
const actions = {
    GET_FOLW_CHANGE({ commit }) {
        // console.log('進入vuex的請求')
        getUnitT({
            pageNum: 0,
            pageSize: 0,
        }).then(res => {
            if (res.data.data) {
                commit('SET_FLOW_CHANGE', res.data.data)
            }
        })
    }
}
//Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。
//就像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，
//且只有當它的依賴值發生了改變才會被重新計算。
const getters = {
    getFlowData: state => {
        return state.flowData;
    }
};

export default {
    namespaced: true,//namespaced設定為了能在vue頁面訪問單獨自己想要訪問的vuex模組
    state, actions, mutations,getters
}

Vuex輔助方法（在vue頁面中訪問5大核心元素）map…方法中第一個引數及namespaced開啟後對應每個module中的‘name’

1、mapState

import { mapState } from 'vuex'
//vue頁面
computed: {
      ...mapState('userInfo', ['flowData'])  //this.flowData
      // 第一個引數及namespaced開啟後對應每個module中的name
      /* modules: {
      		userInfo,
      		websocketStore
    	} */
},

2、mapActions

import { mapActions } from 'vuex'
//vue頁面
methods:{
	...mapActions('userInfo', ['GET_FOLW_CHANGE']),//this.GET_FOLW_CHANGE()
}

3、mapMutations

import { mapMutations} from 'vuex'
//vue頁面
methods:{
	...mapMutations('userInfo', ['SET_FLOW_CHANGE']),//this.SET_FLOW_CHANGE()
}

4、mapGetters

import {mapGetters} from 'vuex'
//vue頁面
computed:{
    ...mapGetters('userInfo', ['getFlowData']),
},
//getters 一般常用的使用方式 watch監聽改變來更新檢視
watch:{
    getFlowData: function(newVal) {
        console.log(newVal,'vuex getter的返回值 根據它的依賴被快取起來，依賴值發生了改變重新計算返回值')
    },
},

主要記錄一下程式碼塊……………………………………………………