Vue3.0+vuex4.0嚐鮮

前言

做題3.0出了beta版，這一段時間使用VCA的過程中，也接觸了不少3.0的特性，除了些生態相關的東西，別的體驗已經很好了，今天就基於vue-cli-plugin-vue-next搭建一個工程化的Vue3.0樣例。

安裝

注意，這個插件的TS的支持還沒有做好，這裏我們基於JS做。

yarn global add @vue/cli

vue create vue3-beta-js-all

同時由於vuex和vue-router已經進入了4-alpha版本，爲了讓我們直接用4.0的模板構建，這裏需要在工程構建的過程中勾選vuex和vue-router。隨後直接升級即可把vuex和vue-router自動升級爲4.x。

vue add vue-next

✔  Successfully invoked generator for plugin: vue-cli-plugin-vue-next
 vue-next  Installed vuex 4.0.
 vue-next  Documentation available at https://github.com/vuejs/vuex/tree/4.0
 vue-next  Installed vue-router 4.0.
 vue-next  Documentation available at https://github.com/vuejs/vue-router-next

"dependencies": {
    "core-js": "^3.6.4",
    "vue": "^3.0.0-beta.1",
    "vue-router": "^4.0.0-alpha.5",
    "vuex": "^4.0.0-alpha.1"
  },

變化

模板會發生一些變化，首先是初始化：

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

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

接着是4.x的Vuex和Vue-router，他們各自的初始化也有一些改變，如createStore和createRouter來創建store和router。

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

export default Vuex.createStore({
  state,
  getters,
  mutations,
  actions,
  modules
});

隨後與VCA不同，所有的VCA API都可以從vue中直接引用：

import { onMounted } from "vue";

其他的VCA API之前的文章都有涉及到，這裏就不展開了，和在Vue2下使用VCA　API體驗很相似。

全家桶

但是全家桶的體驗就有些不同了:

  state: {
    name: "test",
  },
  getter: {
    name: (state) => state.name,
  },
  mutations: {
    changeTest(state) {
      state.name = "sss";
    },
  },

定義還是那個樣,使用就不同了:

import { useStore } from "vuex";
import { computed } from "vue";

export default {
  name: "about",
  setup() {
    const store = useStore();
    const name = computed(() => store.getters.name);
    function handleClick() {
      store.commit("changeTest");
    }
    return { handleClick, name };
  },
};

同理,我們也可以使用useRoute去使用route等。

這個use的寫法和hooks還是很像的。

在vue2配合VCA去使用時則不同，需要利用root參數，舉個例子：

setup(props, {root}){
  const store = root.$store
  const router = root.$router
  ...
}

總結

沒啥可說的了，目前還是使用vue2+VCA去做，等正式版出來再做項目實戰把。