vuex的用法

src/store/modules/haha.js

const haha = {
 state: {
    count: 100,
    text: "学习Vue.js 3管理后台开发"
},
 getters: {
    getCount: state => {
        return state.count + 10; 
    },
    getText: state => {
        return "我正在努力" + state.text
    }
},
 mutations: {
    SET_COUNT(state)  {
        state.count = 10;
    },
    SET_TEXT(state, payload)  {
        state.text = payload;
}
},
actions: {}


}

export default haha

//export default {
 //   namespace: true,
 //   state,
  //  getters,
  //  mutations,
  //  actions,

src/store/index.js

import { createStore } from "vuex";

import haha from "./modules/haha";
export default createStore({
    modules: {
        haha
    }
});

components/HelloWorld.vue

<template>
  <div class="">控制台</div>
</template>
<script>

import { useStore } from 'vuex';
export default {
 name: 'HelloWorld',
 props: {},
 setup(props){

    const store = useStore();
    
    console.log("计算后的结果:" + store.getters["getCount"])
    console.log("原始结果:" + store.state.haha.count);

    console.log("计算后的结果:" + store.getters["getText"])
    

    const { state } = useStore();
    console.log(state.haha.count)

    console.log("原始结果:" + store.state.haha.text);
    store.commit("SET_TEXT", "正在学习Element Plus");
    console.log("修改后的结果:" + store.state.haha.text);
   
    
    
  }
}
</script>
<style lang="scss" scoped>
</style>