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去做，等正式版出来再做项目实战把。