vue3 使用vuex

import  {createStore} from 'vuex';
import moduleA from './moduleA/index.js'
export default  createStore({
 state:{
    a:1
 },
 getters:{
    comA(state){
        return state.a *2
    }
 },
 mutations:{
   syncChangeA(state,payload){
      state.a += payload
   }
 },
 actions:{
    AsyncChangeA({commit},payload){
       setTimeout(() => {
        commit('syncChangeA',payload)
       }, 1000);
    }
 },
 modules:{
    moduleA
 }
})

<template>
  <div>
    <h1>iii</h1>
    <h1>{{ a }}</h1>
    <h1>{{ comA }}</h1>
    <h1>{{ comaa }}</h1>
    <h1>{{ comModuleA }}---</h1>
    <button @click="handleSyncChangeA">改变a同步</button>
    <button @click="handleAsyncChangeA">改变a异步</button>
    <button @click="handleInstance">操作实例</button>
    <h1>{{ aa }}</h1>
    <h1>{{ bb }}</h1>
    <button @click="syncChangeModule">同步改变模块</button>
  </div>
</template>
<script lang="ts" setup>

import {ref, toRefs, reactive, getCurrentInstance, onMounted, computed } from "vue";
import { useStore, mapState ,mapGetters} from "vuex";
let { proxy }: any = getCurrentInstance();


let aa = computed(() => {
  return 999;
});
let bb = computed(() => {
  return 888;
});

let comaa = computed(() => {
  return instanceStore.getters.comA;
});

//通过实例点出来
let handleInstance = () => {
  proxy.$store.commit("syncChangeA", 2);
};
//通过解构赋值
const instanceStore = useStore();



// let {} = toRefs(instanceStore.getters)
let comModuleA= instanceStore.getters['moduleA/comModuleA'];

// 模块内的方法
let syncChangeModule = ()=>{
    instanceStore.commit('moduleA/moduleSync',9)
}
let { a } = toRefs(instanceStore.state);
let { comA ,} = toRefs(reactive(instanceStore.getters));//toRefs接收一个响应式对象 不加reactive 警告 receive a plain one
let handleSyncChangeA = () => {
  instanceStore.commit("syncChangeA", 1);
};
let handleAsyncChangeA = () => {
  instanceStore.dispatch("AsyncChangeA", 1);
};
</script>
<style scoped></style>

export default {
  namespaced: true,
  state: {
    moduleA: 11,
  },
  getters: {
    comModuleA(state) {
      return state.moduleA * 2;
    },
  },
  mutations:{
    moduleSync(state,payload){
         state.moduleA +=payload;
         
    }
  }
};

vuexStore.commit('moduleA/setCount', 2)
vuexStore.dispatch('moduleA/getuser')