vue2 composition-api setup 中使用vue-router、vuex

vue2 composition-api setup 中使用vue-router、vuex

记录如何在vue2中组合式api中使用vuex以及vue-router

在页面使用

import { getCurrentInstance } from '@vue/composition-api';

// 在setup中调用
const ins = getCurrentInstance();
const store = ins.proxy.$store;

// 需要生成计算属性
const count = computed(() => {
  // 如果获取getter的值 -> store.getter.count
  return store.state.count
})

// 获取 router, route 一样
const router = ins.proxy.$router;
const route = ins.proxy.$route

封装为vue3中使用vuex的类似方法 useApi.js;

import { getCurrentInstance } from '@vue/composition-api';

// 访问vuex
export const useStore = () => {
  const ins = getCurrentInstance()
  if (!ins) throw new Error('需在setup使用')
  return ins.proxy.$store
}
// 访问router
export const useRouter = () => {
  const ins = getCurrentInstance()
  if (!ins) throw new Error('需在setup使用')
  return ins.proxy.$router
}
// 访问route
export const useRoute = () => {
  const ins = getCurrentInstance()
  if (!ins) throw new Error('需在setup使用')
  return ins.proxy.$route
}

使用方法

 import { useStore, useRouter, useRoute } from '@/utils/useApi'

 // 在setup中调用
  const router = useRouter()
  const route = useRoute()
  const store = useStore()

  // 如果获取getter的值 -> store.getter.count
  const count = computed(() => store.state.count)
  const changeCount = () => {
      store.commit('setCount', 2)
    }

  const goHome = () => {
    router.push('/home')
  }