import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  // 數(shù)據(jù)
  state: {
    count: 0,
  },

  // store的計算屬性
  getters: {},

  // 改變狀態(tài)的唯一方法 同步函數(shù)
  mutations: {},

  // actions類似于mutation 可包含異步函數(shù)
  actions: {},

  // Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter，甚至是嵌套子模塊。
  modules: {}
})

export default store;

import Vue from 'vue' // 引入vue
import App from './App.vue' // 引入App.vue
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
}

export default {
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
}

export default {
  methods: {
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement');
    }
  }
}

export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
}

import { defineStore } from 'pinia';

export const useCartStore = defineStore('cart', {
    state: () => ({
        cartList: [], // 購物車列表數(shù)組
        // 其他狀態(tài)...
    }),
    getters: {
        allCount: (state) => state.cartList.reduce((total, goods) => total + goods.count, 0), // 計算所有商品的總數(shù)量
        allPrice: (state) => state.cartList.reduce((total, goods) => total + goods.price * goods.count, 0), // 計算所有商品的總價格
        // 其他getter...
    },
    actions: {
        addCart(goods) {
        // 添加商品到購物車的邏輯
        },
        deleteCart(goodsId) {
        // 刪除購物車中商品的邏輯
        },
        // 其他action...
    },
});

<template>
  <!-- 使用Store中的數(shù)據(jù) -->
  <div>購物車商品總數(shù)：{{ cartStore.allCount }}</div>
</template>

<script setup>
  import { useCartStore } from '@/stores/cart';
  const cartStore = useCartStore();
  // 可以通過cartStore訪問狀態(tài)數(shù)據(jù)或調(diào)用方法
</script>

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); // 使用持久化插件
app.use(pinia);
app.mount('#app');

export const useCartStore = defineStore('cart', {
   // ...state, getters, actions等定義
}, { persist: true }); // 啟用持久化

import { createSlice } from "@reduxjs/toolkit";

const counterStore = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    addToNum(state, action) {
      state.count = state.count + action.payload;
    },
  },
});

export const { increment, decrement, addToNum } = counterStore.actions;
export default counterStore.reducer;

import { configureStore } from "@reduxjs/toolkit";

import counterReducer from "./modules/counterStore";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./store";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

import { useSelector, useDispatch } from "react-redux";
import { increment, addToNum } from "./store/modules/counterStore";

export default function App() {
  const { count } = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  function countIncrement() {
    dispatch(increment());
  }

  function add20() {
    dispatch(addToNum(20));
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={countIncrement}>+1</button>
      <button onClick={add20}>+20</button>
    </div>
  );
}