Vue3配套的Vuex4与VueRouter4

Vuex是一个专为Vue.js应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。VueRouter是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。

Vuex4.x

• 安装 npm install vuex@next -S或yarn add vuex@next -S
• 几乎所有的Vuex4 API都与Vuex3保持不变
• 使用createStore函数来创建store实例,使用Vue实例.use(store)安装
• createLogger函数从核心模块vuex中导出
• 在setup中用useStore组合式函数来使用store实例
• 支持TypeScript

  // store/index.js
  import {
    createStore, // 创建Vuex实例的方法
    createLogger // vuex 日志插件
  } from 'vuex'
  const env = process.env.NODE_ENV
  const store = createStore({ // 使用createStore创建store实例
    state: { x: 0, y: 10 },
    mutations: {
      changeX (state, payload = 1) {
        state.x += +payload
      },
      changeY (state, payload = 1) {
        state.y += +payload
      }
    },
    actions: {
      changeYAsync ({ commit }, payload) {
        setTimeout(() => {
          commit('changeY', payload)
        }, 1000)
      }
    },
    plugins: env === 'production' ? [] : [createLogger()]
  })
  export default store
  // main.js
  import { createApp } from 'vue'
  import App from './App.vue'
  import store from './store/index'
  const app = createApp(App)
  app.use(store) // 使用use安装store对象
  app.mount('#app')

<!-- test.vue -->
<template>
  <p>测试Vuex</p>
  <p>x: {{x}}</p>
  <p>y: {{y}}</p>
  <p>
    <button @click="setX(5)">改变X</button>
    <button @click="setY(2)">改变Y</button>
  </p>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'test',
  setup () {
    const store = useStore() // 使用store
    const x = computed(() => store.state.x)
    const y = computed(() => store.state.y)
    const setX = (val) => { // 同步修改
      store.commit('changeX', val)
    }
    const setY = (val) => { // 异步修改
      store.dispatch('changeYAsync', val)
    }
    return {
      x, y, setX, setY
    }
  }
}
</script>

VueRouter4.x

• 安装 npm install vue-router@4 -S
• 在VueRouter4的API与VueRouter3大部分的API都没有变化
• 使用createRouter函数来创建router实例,使用Vue实例.use(router)安装

• mode配置被history取代

  "history": createWebHistory()  # history模式
  "history": createWebHashHistory() # hash模式
  "history": createMemoryHistory() #

• 使用'/:pathMatch(.*)*'代替了 * 路由

  // router/index.js
  import { createRouter, createWebHashHistory } from 'vue-router'
  import Test from '../pages/Test.vue'
  import Vote from '../pages/Vote.vue'
  const router = createRouter({ // 使用createRouter创建路由对象
    // 指定路由使用模式 代替VueRouter3中的 mode
    history: createWebHashHistory(), // hash模式
    routes: [ // 路由规则 映射关系
      { path: '/', component: Vote },
      { path: '/test', component: Test },
      { path: '/:pathMatch(.*)*', redirect: '/' }
    ]
  })
  export default router
  // main.js
  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router/index'
  const app = createApp(App)
  app.use(router) // 安装路由对象
  app.mount('#app')
  // App.vue
  <template>
    <router-view></router-view>
  </template>
  // Test.vue
  import { useRoute, useRouter } from 'vue-router'
  export default {
    name: 'test',
    setup () {
      const route = useRoute()
      const router = useRouter()
      console.log(route) // 当前路由实例
      // Proxy {path: ComputedRefImpl, name: ComputedRefImpl, params: ComputedRefImpl, query: ComputedRefImpl, …}
      console.log(router) // 全局路由实例
      // {currentRoute: RefImpl, push: ƒ, replace: ƒ, isReady: ƒ, getRoutes: ƒ, …}
    }
  }

文章推荐: Vue-Router必知必会–万字肝文