vuex 4.0

定义

store/index.js

import { createStore } from 'vuex';
export default createStore({
  state: {
      count:1
  },
  mutations: {
    addCount(state,value){
        state.count+=1;
    }
  },
  actions: {
    asyncAddCount({commit},value){
        setTimeout(()=>{
            commit('addCount',value)
        },1000)
    } 
  },
  getters:{
    double(state){
        return state.count*2
    }
  },
  modules: {
  }
});

main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');

使用

<template>
    <h2>vux：{{count}}</h2>
    <h2>vux：{{double}}</h2>
    <button @click="asyncAddCount">asyncAddCount</button>
    <button @click="addCount">addCount</button>
</template>
<script>
import {useStore} from 'vuex'
    export default {
        setup(){
            const store = useStore()
      //☆☆写在这里的state/getters要不要写computed 取决于你的数据要不要动态
      let sum = store.state.sum;
            return {
        sum,
                count : computed(()=>store.state.count),
                double : computed(()=>store.getters.double),
                asyncAddCount : ()=>store.dispatch('asyncAddCount'),
                addCount : ()=>store.commit('addCount')
            }
        }
    }
</script>

vue-route 4.0

定义

router.index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

main.js

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

createApp(App).use(router).mount('#app');

使用

import {useRouter,useRoute} from 'vue-router'

export default {
    setup(){
          const router = useRouter()
        const route = useRoute()

        router.push()
          route.query.xx
    },
}