vue3.0項目搭建，vue-router以及vueX的簡單使用

vue3.0正式版本還未發布，不過vue3.0的新特性可以搶先體驗

接下來我就說說我的體驗方式吧

1. 首先通過vue-cli搭建vue2.0項目

vue create [項目名稱]

2. vue2.0項目生成后,進入到項目文件中，然后通過以下命令將項目升級到vue3.0

vue add vue-next

通過以上步驟后項目便升級到了vue3.0在項目中便可以體驗vue3.0的新特性了

vue3.0的setup函數

1. setup 函數執行時期在beforeCreate 之后、created 之前執行

2. 需要非常注意的是在vue3.0的setup 函數中是無法訪問到this的

3. 頁面渲染數據，以及頁面的一些函數事件都需要通過return出去,基本結構如下

 <script>
import { reactive, toRefs } from "vue";

export default {
setup() {
  // 響應式數據
  const state = reactive({
    name: "boyyang"
  });
  // 頁面事件函數
  const test = () =>{
    state.name = "楊男孩"
  }
  
  // 將數據以及函數return 出去
  return {
    ...toRefs(state),
    test
  };
}
};
</script>

vue3.0路由使用

• 在vue3.0中的路由使用，模板中還是可以使用 router-link ，但是在setup函數中使用有所不同

<script>
//首先的從vue-router中導入useRouter
import { useRouter } from "vue-router";

export default {

  setup() {

    //實例化路由
    const router = useRouter();
    router.push("/");

  }

};
</script>

vue3.0中vuex的使用

• vue3.0中vuex的使用同vue-router類似

import { toRefs, reactive } from "vue";
import { useStore } from "vuex";
export default {

  setup() {

    const state = reactive({
      name: ''
    })
    
    const store = useStore()

    state.name = store.state.Name

    return {
      ...toRefs(state)
    }

  }

};