Vue3 Composition API 中使用 Vuex

下面是一个Vue3 Composition API 中使用Vuex的实例todoList，用到了state，mutations，actions，可以把自己之前用vue2的旧语法改写成vue3的语法，使用setup，ref, reactive, toRefs，useStore等，
完整代码指路：github: color-library；
原文出处：Vue3 Composition API 中使用 Vuex；
原文地址同时也是我的博客园地址，欢迎关注，会不定期更新~

<template>
  <div class="todo-list-wrap">
    <h2>{{ title }}h2>
    <div class="name-wrap">
      <h3>{{ name }}h3>
      <el-button @click="handleChangeName">
        修改
      el-button>
      <el-button @click="handleRestoreName">
        还原
      el-button>
    div>
    <div class="input-wrap">
      <el-input v-model="inputVal"  @keyup.enter="handleAddItem">el-input>
      <el-button @click="handleAddItem">
        新增
      el-button>
    div>
    <div class="list-item-wrap">
      <div v-for="(item,index) in dataList" :key="index" class="list-item">
        <span>{{ item }}span>
      div>
    div>
  div>
template>

<script>
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'

  export default {
    name: 'TodoList',
    setup() {
      const title = ref('TodoList')
      const store = useStore()
      const { name } = toRefs(store.state) // 解构
      const inputVal = ref('')
      const dataList = reactive([])
      
      const handleAddItem = ()=> {
        dataList.push(inputVal.value)
        inputVal.value = ''
      }
      const handleChangeName = ()=> {
        // commit和mutations做关联，提交一个commit，触发一个mutation
        store.commit('changeName', 'Happy')
      }
      const handleRestoreName = ()=> {
        // dispatch和actions做关联，派发一个action
        store.dispatch('getData', 'Biblee')
      }
      return {
        title,
        name,
        inputVal,
        dataList,
        handleAddItem,
        handleChangeName,
        handleRestoreName
      }
    }
  }
</script>

store：

// store/index.js
import { createStore } from "vuex"

export default createStore({
  state: {
    name: 'Biblee'
  },
  // 同步操作
  mutations: {
    changeName(state, val) {
      state.name = val
    }
  },
  // 异步操作
  actions: {
    getData(store, val) {
      setTimeout(()=>{
        store.commit('changeName',val)
      },2000)
    }
  },
  modules: {

  }
})