vue3.0 使用 vue-router以及vueX的简单使用

1. 首先通过vue-cli搭建, vue-cli 版本大于4.0

vue create [项目名称]

2. 选择 vue3 版本

vue3.0的setup函数

• Lsetup 函数执行时期在beforeCreate 之后、created 之前执行

• 需要非常注意的是在vue3.0的setup 函数中是无法访问到this的

• 页面渲染数据，以及页面的一些函数事件都需要通过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)
    }

  }

};