vue3.0书写todo

vue3.0部分基础知识 及使用vue3.0书写todo

只想看代码不想听啰嗦的请走这里直接查看代码

涉及知识点

1.vue组件的定义-------defineComponent

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  // 已启用类型推断
})
</script>

2.Setup的使用 详细可点击至官网查看
在 setup() 内部，没有this,所以不能使用this
使用 setup 函数时，它将接收两个参数：props 和 context

setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

注意:因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性; 如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)

  console.log(title.value)
}

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

context 是一个普通的 JavaScript 对象，它暴露组件的三个 property：

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

注意: context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构

export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

3.组件之间的传值
父传子:与vue2相同 父组件通过自定义属性传值 子组件通过props接受

 <nav-main :list="list"></nav-main>   //父组件

props:{                              //子组件
   list:{
     type:Array,
     required:true
   }
 }

  子传父:子组件通过事件分发传递   父组件通过自定义事件接受

  setup(props, ctx) {               //子组件
    let enter = (val) => {
      ctx.emit('add', val);
    };
    return {
      enter,
    };
  }

 <nav-header @add="add"></nav-header>  //父组件

4.本地存储
5.vuex的使用

import { createStore } from 'vuex';    //文件地址store/index.js

export default createStore({
 // state:定义所需要的状态
 state: {
   list: JSON.parse(localStorage.getItem('todo')) || [
     {
       title: '吃饭',
       complete: false,
     },
     {
       title: '敲代码',
       complete: false,
     },
     {
       title: '睡觉',
       complete: true,
     },
     {
       title: '发呆',
       complete: true,
     },
   ],
 },
 // mutations:同步修改state 都是方法
 // 第一个参数state是修改的参数,第二个参数是需要修改的值
 mutations: {
   addTodo(state, payload) {
     // 添加任务  payload为需要添加的数据
     state.list.push(payload);
     localStorage.setItem('todo', JSON.stringify(state.list));
   },
   delTodo(state, payload) {
     // 删除任务  payload为需要删除的下标
     state.list.splice(payload, 1);
     localStorage.setItem('todo', JSON.stringify(state.list));
   },
   clear(state, payload) {
     // 过滤后的数组传进来
     state.list = payload;
     localStorage.setItem('todo', JSON.stringify(state.list));
   },
   setLocal(state, payload) {
     localStorage.setItem('todo', JSON.stringify(payload));
   }
 },
 // actions异步提交mutation
 // 第一个参数是store,第二个参数是需要修改的值
 actions: {},
 // modules:模块化
 modules: {},
});

完整代码地址 github vue3.0 todo案例