小白整理了VUEX

computed: {
    //函數形式的 getters 呼叫
    addNum() {
        return this.$store.getters.getCountByParam(2);
    },
    //物件形式的 getters 呼叫
    getNum() {
        return this.$store.getters.getCount;
    }
    //getters不是必須的
    num() {
        return this.$store.state.count
    }
}

//在Vue元件中通過 commit 方法觸發Mutations來修改狀態
methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
    //帶引數的increment
    incrementByParam() {
      this.$store.commit('incrementByParam', 5);
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
    incrementAction() {
      this.$store.dispatch('increment');
    }
}

**store.js:**

import Vue from 'vue';
import Vuex from 'vuex';
import userModule from './user';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user: userModule,
  },
});

**user.js:**

export default {
  namespaced: true,

  state: {
    username: '',
    email: '',
  },

  mutations: {
    setUsername(state, payload) {
      state.username = payload;
    },

    setEmail(state, payload) {
      state.email = payload;
    },
  },

  actions: {
    updateUser({ commit }, payload) {
      commit('setUsername', payload.username);
      commit('setEmail', payload.email);
    },
  },
  getters: {
    getUserName: state => state.username
  }
};

**元件中的使用範例：**

computed: {
  username() {
    return this.$store.state.user.username;
  },
  username2() {
    //如果使用了模組名稱空間，就需要採用this.$store.getters['module/getterName']的方式來存取getter函數；
    //如果沒有使用模組名稱空間，可以直接通過this.$store.getters.getterName存取getter函數
    return this.$store.getters['user/getUserName']
  }
},

methods: {
  updateUser() {
    this.$store.dispatch('user/updateUser', { username: 'John', email: '[email protected]' });
  },
},

import Vue from "vue";
import Vuex from "vuex";
import loggerPlugin from './plugins/logger';

//以下五個檔案是當前目錄下state、getters、mutations、actions分割出來後的檔案
import state from "./state";
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";

Vue.use(Vuex);

const myPlugin = store => {
  store.subscribe((mutation, state) => {
    // 在這裡可以監聽 mutation 的變化和存取 state
  });
};

//下面是將整個模組分割出來
import moduleCard from "xxx/cart/moduleCart.js"
import module2 from "xxx/xxx/module2.js"
import { module3 } from "已安裝元件"

export default new Vuex.Store({
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
  plugins: [loggerPlugin, myPlugin],
  modules: {
    cart: moduleCart,
    moduleName2: module2,
    //這個程式碼片段中的 ...module3 是使用 ES6 的擴充套件運運算元將 module3 模組中的內容解構到 modules 物件中。
    //這樣做可以方便地將 module3 模組的 state、mutations、getters 和 actions 新增到 Vuex 的模組集合中。
    ...module3,
  },
  //在 Vue.js 中，strict 是一個用於開啟嚴格模式的選項。當 strict 設定為 true 時，Vuex 的狀態變更會被嚴格監測，以便捕捉到狀態的不合規變更。
  //在你提供的程式碼中，process.env.NODE_ENV !== "production" 是一個條件判斷語句，它用於根據當前執行環境來確定是否開啟嚴格模式。通常，在開發環境中，我們會將 process.env.NODE_ENV 設定為 "development"，而在生產環境中會設定為 "production"。
  //當 process.env.NODE_ENV !== "production" 為 true 時，說明當前不處於生產環境，此時 strict 會被設定為 true，即開啟嚴格模式。這樣做的目的是為了方便在開發階段捕捉到狀態變更的錯誤，以及進行更加詳細的狀態變更追蹤和錯誤提示。
  //一般來說，建議在開發環境中開啟嚴格模式，而在生產環境中關閉嚴格模式，以獲得更好的效能和體驗。這可以通過構建工具（如 webpack）來設定 process.env.NODE_ENV 的值來實現。
  strict: process.env.NODE_ENV !== "production",
});

 import state from "./moduleCartState.js";
import mutations from "./moduleCartMutations.js";
import actions from "./moduleCartActions.js";
import getters from "./moduleCartGetters.js";

export default {
  namespaced: true,
  state: state,
  mutations: mutations,
  actions: actions,
  getters: getters,
};

在actions中可以使用store，以使用已存狀態資料
import store from "../store.js";

export const addToCart = ({ commit }, product) => {
  commit('addProduct', product);
};

export const removeFromCart = ({ commit }, productId) => {
  commit('removeProduct', productId);
};

//或者下面方式
export default {
    addToCart({ commit }, product) {
        commit('addProduct', product);
    },
    removeFromCart({ commit }, product) {
        commit('removeProduct', productId);
    },
    //包含輔助物件的action，使用`rootState`來存取根模組的狀態，使用`state`來存取當前模組的狀態
    addToCart2({ commit, rootState, state }) {
      commit('addProduct', product);
      console.log(rootState); // 存取根模組的狀態
      console.log(state); // 存取模組的狀態
    },
     removeFromCart2({ commit, rootState }) {
      commit('removeProduct', productId);
      console.log(rootState); // 存取根模組的狀態
    },
}

export const cartProducts = state => state.products;

export const totalItems = state => state.products.length;

或者

export default {
    cartProducts：state => state.products,
    totalItems: state => state.products.length，
    cartProducts2(state, getters, rootState, rootGetters) {
      console.log(rootState); // 存取根模組的狀態
      console.log(rootGetters); // 存取根模組的getters
      return state.products;
    },
};

 export const addProduct = (state, product) => {
  state.products.push(product);
};

export const removeProduct = (state, productId) => {
  state.products = state.products.filter(p => p.id !== productId);
};

或者
import Vue from "vue";
export default {
    addProduct(state, product) {
        Vue.set(state, "products", product);
    },
    removeProduct(state, productId) {
        Vue.set(state, "products", state.products.filter(p => p.id !== productId))
    }
}

 export default {
  products: [],
};

 **plugins/logger.js:**
const loggerPlugin = store => {
  store.subscribe((mutation, state) => {
    console.log('mutation type:', mutation.type);
    console.log('mutation payload:', mutation.payload);
    console.log('state:', state);
  });
};

export default loggerPlugin;