vue3中的vuex(store-＞index.js)

todoList 示例
代码示例

import { createStore } from 'vuex'

export default createStore({
  state: {
    todoList: [{ title: '吃饭', complete: false }, { title: '睡觉', complete: true }, { title: '打游戏', complete: true }]
  },
  mutations: {
    addTodo(state, payload) {
      state.todoList.push(payload)
    },
    // 单个删除
    delTodo(state, payload) {
      state.todoList.splice(payload, 1)
    },
    // 删除已完成
    clear(state, payload) {
      state.todoList = payload
    }
  },
  actions: {
    asyncSetname(store, params) {
      setTimeout(() => {
        store.commit('setName', params)
      }, 2000);
    }
  },
  modules: {
  },
  getters: {
  },

})

组件调用 vuex中的方法
组件

<template>
  <div class="home">
    <navHeader @add="add"></navHeader>
    <navMain :todoList="todoList" @del="del"></navMain>
    <navFoot :todoList="todoList" @clear="clear"></navFoot>
  </div>
</template>

js示例
import { useStore } from "vuex"; //引入 let store = useStore(); //调用 vuex let todoList = computed(() => { return store.state.todoList; }); //使用 store.commit()//传值和方法

<script>
import navHeader from "@/components/navHeader/navHeader.vue";
import navMain from "@/components/navMain/navMain.vue";
import navFoot from "@/components/navFoot/navFoot.vue";
import { defineComponent, ref, onMounted, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default defineComponent({
  name: "Home",
  components: {
    navHeader,
    navMain,
    navFoot,
  },
  setup(props, ctx) {
    let store = useStore();  //调用 vuex
    let value = ref("");
    let router = useRouter(); // router 是全局路由对象
    let route = useRoute(); // route 当前路由对象  // query传的参数全是字符串类型

    let todoList = computed(() => {
      return store.state.todoList;
    });

    console.log(route);
    let add = (val) => {
      value.value = val;
      let flag = true;
      //先判断有没有重复的
      todoList.value.map((item) => {
        if (item.title == value.value) {
          flag = false;
          alert("已有任务");
        }
      });
      // 没有重复的 添加
      if (flag) {
        store.commit("addTodo", {
          title: value.value,
          complete: false,
        });
      }

      console.log(val);
    };
    // 删除
    let del = (value) => {
      console.log(value);
      store.commit("delTodo", value);
    };
    // 清楚已完成
    let clear = (value) => {
      store.commit("clear", value);
    };

    return {
      add,
      value,
      todoList,
      del,
      clear,
    };
  },
});
</script>