Vuex使用方法

store/index.ts

import { createStore } from 'vuex'
import ModuleUser from './user'

export interface ItemType {
  id: string,
  content: String,
  isFinished: boolean
};

export type ToDoType = Array<ItemType>;

interface stateType {
  type: 'all' | 'active' | 'complete'
  todo: ToDoType
}

export default createStore({
  state: {
    type: 'all',
    todo: []
  } as stateType,
  // computed
  getters: {
  },
  // 同步methods
  mutations: {
    AddTodo(state: stateType, payload: { id: string, content: string }) {
      state.todo.push({ ...payload, isFinished: false });
    },
    init(state: stateType, payload: stateType) {
      state.todo = [...payload.todo];
    },
    updateTodo(state: stateType, payload: ItemType & { index: number }) {
      state.todo[payload.index].content = payload.content;
      state.todo[payload.index].isFinished = payload.isFinished;
    },
    deleteTodo(state: stateType, payload: { id: string, index: number }) {
      state.todo.splice(payload.index, 1);
    },
    changeType(state: stateType, payload: 'all' | 'active' | 'complete') {
      state.type = payload;
      console.log(state.type);
    }
  },
  // 异步methods
  actions: {
  },
  // 多模块createStore
  modules: {
     user: ModuleUser,
  }
})

store/user.ts

// user. js
const ModuleUser = {
  state: {
    id: "",
    username: "",
    photo: "",
  },
  // 同computed
  getters: {
  },
  // method
  mutations: {
    updateUser(state, user) {
      state.id = user.id;
      state.username = user.username;
    },
  },
  // method异步
  actions: {
  },
  // 多模块
  modules: {
  }
};

export default ModuleUser;

main.ts

import store from './store'

createApp(App).use(store)

 在vue文件中调用

<script setup>
// 方法一
import { useStore } from 'vuex';

const store = useStore();
store.dispatch; // 调用actions中方法
store.commit; // 调用mutations中方法
console.log(store.state, store.dispatch, store.commit);

// 方法二
import store from "@/store";

store.dispatch; // 调用actions中方法
store.commit; // 调用mutations中方法
console.log(store.state, store.dispatch, store.commit);

</script>