Vue3 中的 Vue-Router 和 VueX详解

// main.js
createApp(App).use(store).use(router).mount('#app')

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: {
    name: "John",
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <div>{{ myName }}</div>
</template>

<script>
export default {
  name: "LoginView",
  computed: {
    myName() {
      return this.$store.state.name;
    },
  },
};
</script>

// LoginView.vue
<template>
  <div>{{ myName }}</div>
  <button @click="handleClick">click</button>
</template>

<script>
export default {
  name: "LoginView",
  computed: {
    myName() {
      return this.$store.state.name;
    },
  },
  methods: {
    handleClick() {
      // 1. 想改变数据，VueX 要求第一步，必须派发一个 action，action 名称为 actions 里的方法名
      this.$store.dispatch("change");
    },
  },
};
</script>

import { createStore } from "vuex";

// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: {
    name: "John",
  },
  getters: {
  },
  mutations: {
    // 4. 接收到 commit 信息后，触发对应的 mutation
    change(state) {
      // 5. 在 mutation 里修改数据
      state.name = "Modified Name";
    },
  },
  actions: {
    // 2. 接收到 action 后执行相应的方法
    change(store) {
      // 3. commit 后发送给 mutations
      store.commit("change");
    },
  },
  modules: {},
});

// store/index.js
  getters: {
    upperCasedName: (state) => {
      return state.name.toUpperCase();
    }
  },

<template>
  <div>{{ upperCasedName }}</div>
  <button @click="handleClick">click</button>
</template>

<script>
export default {
  name: "LoginView",
  computed: {
    upperCasedName() {
      return this.$store.getters.upperCasedName;
    },
  },
  methods: {
    handleClick() {
      // 1. 想改变数据，VueX 要求第一步，必须派发一个 action
      this.$store.dispatch("change");
    },
  },
};
</script>

<template>
  <div>{{ name }}</div>
</template>

<script>
import { useStore } from "vuex";
export default {
  name: "LoginView",
  setup() {
    const store = useStore();
    const name = store.state.name;
    return {
      name,
    };
  },
};
</script>

<template>
  <div>{{ name }}</div>
  <button @click="handleClick">Click</button>
</template>

<script>
import { toRefs } from "@vue/reactivity";
import { useStore } from "vuex";
export default {
  name: "LoginView",
  setup() {
    const store = useStore();
    const { name } = toRefs(store.state);
    const handleClick = () => {
      store.commit("changeName");
    };
    return {
      name,
      handleClick,
    };
  },
};
</script>