vue3笔记知识点记录下(ts中使用)在main.ts中导入的方式

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

//router.js
import { createRouter, createWebHistory } from 'vue-router' //vue3的导入router的方式
import ColumnDetail from './views/ColumnDetail.vue'
import Login from './views/Login.vue'
import Home from './views/Home.vue'
import CreatePost from './views/CreatePost.vue'
import store from './store'
const routerHistory = createWebHistory()
const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: { //路由元信息控制
        redirectAlreadyLogin: true
      }
    },
    {
      path: '/create',
      name: 'create',
      component: CreatePost,
      meta: {
        requiredLogin: true
      }
    },
    {
      path: '/column/:id',
      name: 'column',
      component: ColumnDetail
    }
  ]
})
//路由的跳转控制
router.beforeEach((to, from, next) => {
  if (to.meta.requiredLogin && !store.state.user.isLogin) {
    next({ name: 'login' })
  } else if (to.meta.redirectAlreadyLogin && store.state.user.isLogin) {
    next('/')
  } else {
    next()
  }
})

export default router

// store.js vuex
import { createStore } from 'vuex' //vue3 vuex的导入方式
import { testData, testPosts, ColumnProps, PostProps } from './testData'
interface UserProps {
  isLogin: boolean;
  name?: string;
  id?: number;
}
export interface GlobalDataProps {
  columns: ColumnProps[];
  posts: PostProps[];
  user: UserProps;
}
const store = createStore<GlobalDataProps>({
  state: {
    columns: testData,
    posts: testPosts,
    user: { isLogin: true, name: 'xx', id: 1 }
  },
  mutations: {
    login (state) {
      state.user = { ...state.user, isLogin: true, name: 'test' }
    }
  }
})

export default store

//在某个文件中使用(store或者router)
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
setup(){
const router = useRouter()//跳转相关路由的行为
const store = useStore<GlobalDataProps>()
const user = computed(() => store.state.user) //在计算属性中使用
router.push({ name: 'column', params: { id: 1 } })
store.commit('login')
const route = useRoute() //查看路由的参数信息
const currentId = +route.params.id
  return {
  
  
  }

}

/*vue3模板中使用如router,vuex的方法，用法与vue2是一样的，如下*/
<div v-if="$route.query.id"></div>
<div @click="$router.path({path:'/login'})">  {{$store.state.token}}</div>