Vue3中Vuex的基本使用

src/store/uuidState.js

const uuidState = {
  namespaced: true,
  state: {
    uuid: "",
    state_tag: "",
  },
  // 要想改变state中的数据必须使用mutations的方法
  mutations: {
    changeUuid(state, value) {
      state.uuid = value;
    },
    changeTag(state, value) {
      state.state_tag = value;
    },
  },
  // 异步的方法
  actions: {
    CHANGE_TAG(context, value) {
      setTimeout(() => {}, 2000);
      context.commit("changeTag", value);
    },
  },
  // 类似计算属性
  getters: {
    uuidToUpper(state) {
      return state.uuid.toUpperCase();
    },
  },
};

// export default uuidState;
export default { uuidState };

src/store/index.js

import { createStore } from "vuex";
import uuidState from "./uuidState";
export default createStore({
  state: {
    code: "this is a code",
  },
  getters: {
    CODE(state) {
      return state.code.toUpperCase();
    },
  },
  mutations: {},
  actions: {},
  modules: {
    // uuidState,
    uuidState: uuidState.uuidState,
  },
});

src/views/Vue3Vuex.vue

<template>
    <div>Vue3------Vuex复习</div>
    <div>使用模块中的state：{{ $store.state.uuidState.uuid }}</div>
    <div>使用模块中的getters：{{ $store.getters['uuidState/uuidToUpper'] }}</div>
    <div>使用非模块的state：{{ $store.state.code }}</div>
    <div>使用非模块的getters：{{ $store.getters.CODE }}</div>
</template>

<script setup>
import { nanoid } from 'nanoid'
import { useStore } from 'vuex';
const store = useStore()
// 使用mutations修改state中的的值
const saveuuid = () => {
    const uuid = nanoid()
    store.commit('uuidState/changeUuid', uuid)
}
// 获取state中的值
const getuuid = () => {
    return store.state.uuidState.uuid
}
// 使用actions异步修改state的值
const setStateTag = () => {
    store.dispatch('uuidState/CHANGE_TAG', '-----actions-----')
}
// 使用getters加工state的数据
const getUuidUpper = () => {
    return store.getters['uuidState/uuidToUpper']
}
// 初始化
const init = () => {
    saveuuid()
    setStateTag()
    // console.log('store', store);
    console.log('uuid', store.state.uuidState.uuid);
    console.log('state_tag', store.state.uuidState.state_tag);
    console.log('getter', store.getters['uuidState/uuidToUpper']);
}
init()
</script>

<style lang="scss" scoped>
</style>

结果展示：