VUE 3.0 vue-router 与 vuex 学习笔记

vue-router 

• 下载vue-router 插件
• 在src 下建立router文件夹，以及index.ts
• index.ts文件中，引入  vue-router

import {createRouter,createWebHashHistory} from 'vue-router'
export default  createRouter({
  history:createWebHashHistory(),
  routes:[
    {
      path:"/",
      component:()=>import('../view/a.vue')
    },
    {
      path:"/about",
      component:()=>import('../view/b.vue')
    }
  ]
})

• 在main.ts 中引入 router文件夹下的文件，并应用到vue 实例中

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index'
const app = createApp(App)
app.use(router)  // 与vue2 方法差不多

app.mount('#app')

• app.vue 文件中，<router-link></router-link>

vuex

• 下载vuex,并在src下简历store文件，与index.ts （这一步与vue2 一样）
• 在index.ts 文件中，引入vuex 

 

import {createStore} from 'vuex'
interface state{
  name:string
}
export default createStore({
  state:{
    name:'网民'
  },
  mutations:{
    add(state,index){
      console.log(index,'000');
      
      state.name = state.name+index.lable
    }
  }
})

 

• 在 main.ts中引入store下面的index.ts （与上面router 步骤一致）
• 在文件中，运用store中的数据

<script lang="ts" setup>
import { ref, computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
const vuexxx = computed(() => store.state.name);
const numer = ref(0);
const added = () => {
  console.log(numer.value);

  store.commit("add", {
    lable: (numer.value += 1),
    isfinished: false,
  });
};
</script>