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)
    }

  }

};