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>