Composition API中setup使用

3.0正式發版了，先嘗鮮一波寫了一個小demo

一 初始

邏輯很簡單就是一個新增和删除方法，vue3.0是相容2.0的是以很多文法還是不變的，這個是最初方法，把所有的邏輯都寫在setup裡面，這個時候其實會疑惑這樣寫邏輯太多怎麼辦，是以就有了進化版本。看到引入reactive這個時候，感覺後面應該會有react的味道，後面整理我感覺還是有點意思的。

<template>
  <input v-model="state2.info.id" />
  <input v-model="state2.info.name" />
  <input v-model="state2.info.age" />
  <button @click="addStu">添加</button>
  <div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">
    {{item.name}} --- {{item.age}}
  </div>
</template>

<script>
import { reactive } from  'vue' //首先要引入reactive
export default {
  setup() {
    let state = reactive({
      stus: [
        {id: 1, name: '1s', age: 10},
        {id: 2, name: '2s', age: 20},
        {id: 3, name: '3s', age: 30},
      ]
    })
    function remStu(index) {
      state.stus = state.stus.filter((stu, idx) => idx != index)
    }//點選行删除

    let state2 = reactive({
      info: {
        id: null,
        name: null,
        age: null
      }
    })
    function addStu(e) {
      e.preventDefault()
      const stu = Object.assign({}, state2.info)
      state.stus.push(stu)
      state2.info.id = ''
      state2.info.name = ''
      state2.info.age = ''
    }//新增一條資料
    return { state, remStu, state2, addStu } //必須要把資料return出去
  },
}

</script>
           

二 整理

這時候把方法從setup裡面抽離出去，看到這裡時候感覺有那味道了，這個時候感覺舒服多了也很熟悉了，把方法抽離出去每個邏輯在自己的方法内執行，有點意思，到了下面還有更6的操作。

<template>
  <input v-model="state2.info.id" />
  <input v-model="state2.info.name" />
  <input v-model="state2.info.age" />
  <button @click="addStu">添加</button>
  <div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">
    {{item.name}} --- {{item.age}}
  </div>
</template>

<script>
import { reactive } from  'vue'
export default {
  setup() {
    let { state, remStu } = useRemove()
    let { state2, addStu } = useAddStu(state)
    return { state, remStu, state2, addStu }
  },
}

function useAddStu(state) {
  let state2 = reactive({
    info: {
      id: '',
      name: '',
      age: ''
    }
  })
  function addStu(e) {
    e.preventDefault()
    const stu = Object.assign({}, state2.info)
    state.stus.push(stu)
    state2.info.id = ''
    state2.info.name = ''
    state2.info.age = ''
  }
  return { state2, addStu }
}

function useRemove() {
  let state = reactive({
    stus: [
      {id: 1, name: '1s', age: 10},
      {id: 2, name: '2s', age: 20},
      {id: 3, name: '3s', age: 30},
    ]
  })
  function remStu(index) {
    state.stus = state.stus.filter((stu, idx) => idx != index)
  }
  return { state, remStu }
}
</script>
           

三 更新

最6的操作來了，感覺舒服了

<template>
  <input v-model="state2.info.id" />
  <input v-model="state2.info.name" />
  <input v-model="state2.info.age" />
  <button @click="addStu">添加</button>
  <div v-for="(item, index) in state.stus" :key="index" @click="remStu(index)" style="margin-top:20px; cursor:pointer">
    {{item.name}} --- {{item.age}}
  </div>
</template>

<script>
import { useRemove, useAddStu } from './HelloWorld'
export default {
  setup() {
    let { state, remStu } = useRemove()
    let { state2, addStu } = useAddStu(state)
    return { state, remStu, state2, addStu }
  },
}
</script>
           

HelloWorld.js

import { reactive } from  'vue'

export function useAddStu(state) {
  let state2 = reactive({
    info: {
      id: '',
      name: '',
      age: ''
    }
  })

  function addStu(e) {
    e.preventDefault()
    const stu = Object.assign({}, state2.info)
    state.stus.push(stu)
    state2.info.id = ''
    state2.info.name = ''
    state2.info.age = ''
  }
  return {state, state2, addStu }
}

export function useRemove() {
  let state = reactive({
    stus: [
      {id: 1, name: '1s', age: 10},
      {id: 2, name: '2s', age: 20},
      {id: 3, name: '3s', age: 30},
    ]
  })
  function remStu(index) {
    state.stus = state.stus.filter((stu, idx) => idx != index)
  }
  return { state, remStu }
}
           

寫至此感覺舒服了，就我目前菜鳥技術我覺得這裡解決了我之前在項目中data裡面每次會建一大堆變量，然後this來this去的問題，現在建立的變量可以知道哪個方法裡面用，可以從哪個方法引，怎麼去傳值，最後一個HelloWorld.js中兩個方法其實可以寫成兩個方法，單獨引用都可以。

總體感覺，新的api引入會将以後開發邏輯整理的更加清晰，期待後續v3的完善

以上代碼僅個人學習demo，具體的api可以參考https://composition-api.vuejs.org/#api-introduction

還有一個vue3，https://vue-next-template-explorer.netlify.app/