1.創(chuàng)建store.js

說(shuō)明：創(chuàng)建一個(gè)新的 Vuex Store 實(shí)例，配置 Store 中的模塊。

import Vue from 'vue';
import Vuex from 'vuex';
// 導(dǎo)入兩個(gè) Vuex 模塊：moduleCart 和 moduleUser
import moduleCart from '@/store/cart.js';
import moduleUser from '@/store/user.js';
//使用vuex
Vue.use(Vuex);
//Vuex store 實(shí)例的方法,需要傳入一個(gè)配置對(duì)象modules
const store = new Vuex.Store({
  
  modules: {
    //購(gòu)物車相關(guān)的模塊
    m_cart: moduleCart,
    //用戶相關(guān)的模塊
    m_user: moduleUser,
  },
});
export default store;

2.user.js

說(shuō)明：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-665300.html

• 在微信小程序中，使用 Vuex 進(jìn)行狀態(tài)管理時(shí)，可以通過?this.commit()?方法來(lái)觸發(fā)一個(gè) mutation，并對(duì)應(yīng)傳入指定的 mutation 名稱。例如，this.commit('m_cart/saveToStorage')?表示觸發(fā)名為?saveToStorage?的?m_cart?模塊的 mutation
• state用函數(shù)的形式。

export default {
  // 開啟當(dāng)前模塊命令空間（必須要）
  namespaced: true,
  state: () => ({
    // 購(gòu)物車的數(shù)據(jù)，存儲(chǔ)商品信息對(duì)象
    // 默認(rèn)規(guī)定需要6個(gè)屬性
    cart: JSON.parse(uni.getStorageSync('cart') || '[]'),
  }),
  // 加工
  mutations: {
  // 更新所有商品的勾選狀態(tài),newState是用戶傳過來(lái)的狀態(tài)
    updateAllGoodsState(state, newState) {
      state.cart.forEach((x) => x.goods_state = newState);
      // 持久化存儲(chǔ)
      this.commit('m_cart/saveToStorage');
    },
    // 永久儲(chǔ)存cart信息
    saveToStorage(state) {
      uni.setStorageSync('cart', JSON.stringify(state.cart));
    },
    // 通過id刪除購(gòu)物車對(duì)應(yīng)的商品信息
    removeGoodsById(state, goods_id) {
      // 將商品傳來(lái)以后，將id相同的過濾掉，留下其他商品信息
      state.cart = state.cart.filter((x) => x.goods_id !== goods_id);
      this.commit('m_cart/saveToStorage');
    },
    // 更新商品數(shù)量
    updateGoodsCount(state, goods) {
      const result = state.cart.find((x) => x.goods_id === goods.goods_id);
      if (result) {
        result.goods_count = goods.goods_count;
        // 持久化存儲(chǔ)在本地
        this.commit('m_cart/saveToStorage');
      }
    },
    // 更新購(gòu)物車商品的勾選狀態(tài)
    updateGoodsState(state, goods) {
      const findResult = state.cart.find((x) => x.goods_id === goods.goods_id);
      if (findResult) {
        findResult.goods_state = goods.goods_state;
        this.commit('m_cart/saveToStorage');
      }
    },
    addToCart(state, goods) {
      // 根據(jù)提交的商品的id,查詢購(gòu)物車是否存在商品，沒有的話push就行了
      const findResult = state.cart.find((x) => x.goods_id === goods.goods_id);
      // 判斷
      //   console.log(findResult);
      if (!findResult) {
        state.cart.push(goods);
      } else {
        findResult.goods_count++;
        // console.log(findResult);
      }
      // 觸發(fā)my_cart命令空間下的方法
      this.commit('m_cart/saveToStorage');
      // console.log(state.cart);
    },
  },
// 類似計(jì)算屬性
  getters: {
    // 勾選商品的總價(jià)格
     checkGoodsAmount(state) {
    return state.cart.filter((x) => x.goods_state).reduce((total, item) => total += item.goods_count * item.goods_price, 0).toFixed(2);
     },
    // 已經(jīng)勾選商品的總數(shù)量
    checkedCount(state) {
      // 過濾出有x.goods_state的值，然后將goods_count進(jìn)行累加
      return state.cart.filter((x) => x.goods_state).reduce((total, item) => total += item.goods_count, 0);
    },
    // 統(tǒng)計(jì)購(gòu)物車商品的總數(shù)量
    total(state) {
      let c = 0;
          // 循環(huán)統(tǒng)計(jì)商品的數(shù)量,累加到變量c中
      state.cart.forEach((x) => c += x.goods_count);
      return c;
    },

  },
};

到了這里，關(guān)于uniapp項(xiàng)目-配置store文件夾的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！