vuex 如何在vue 独立插件中使用? 插件中的vuex 又如何与 全局 的vuex合并?

问题是这样的, 我有一个 vue 插件(使用了vue install 导出,可以使用vue.use()引入的插件),我想在这个插件当中使用 vuex 用来进行组件之间通信。
目前出现了如下问题:

我知道的是 vuex 使用时,是在vue创建对象前以插件方式导入,并在vue实例化的时候注入到vue对象中的,而现在我的插件,
只是一大堆vue组件的集合,并不是一个完整的 vue 实例,所以在导出时并不能依赖 全局中 main.js
当中实例化的vue对象,也就无法使用注入对象的 vuex, 在此情景下我该怎么使用vuex到组件当中呢???

回答:

好吧,又要自问自答,大半夜的,还有一大堆后端接口没撸,扯着看vuex源码,看的一脸懵逼也没找到想要的答案。最后想了一个歪方法。(废话到此为止)

解决方法:

在解决这个问题的时候,绝对不能这样想:“插件中的vuex是相对与引用插件的项目中的vuex独立的”,什么意思呢?就是说不能抱着把你插件中的store完全封装起来,在引用插件的时候,只要注册插件就好了,然后vuex,store 啥也不管,它就会在它自己的小作用域里面 独自happy。(其实我最初的打算就是这个样子的,可是找不到解决办法。求大神支招啊!)

基于以上错误的思路,半天时间没了。后来我的解决方案是,

使用 vuex 的 module .

是的,vuex设计之初呢,为了防止把所有的 状态(state)都放在一起,导致 state 过于庞大而不好维护,所以使用了 module,是的模块的状态得以很好得分开管理。

这里呢,我是将我所有的 状态管理封装到了一个module当中,而在导出插件的时候,顺便将这个module导出。

example

//moduleStore.js
const state={
    editorContent:'editorContent',
};
const mutations={};
const actions={};
const getters={
    getEditorContent(state){
        return state.editorContent;
    }
};

const editorStore={
    state,
    mutations,
    actions,
    getters
}

export default editorStore;
//plugin index.js

import module from './moduleStore.js'

const plugin={
    install:(Vue,options)=>{
    }
}

export const ms=module;    //这里需要以命名方式导出,不能用默认方式导出
export const pl=plugin;

好了,这样的话,基本上就算是搞定了。那插件使用的时候怎么办勒?

首先,

// main.js
import {pl} from 'plugin'; //引入插件
Vue.use(pl)  //全局注册插件

这里,插件的导入注册完毕,再然后,在全局的 Vuex store 中,

//index.js
import {ms} from 'plugin'   //导入模块 vuex store


//再然后,将我们的 ms 注册进全局的 modules
const modules={
    ms,
}

至此,插件完整的与项目整合

回答:

我有以下几个问题请教:
1、插件内部如何使用vuex的相关方法
2、如何导出插件,通过 module.exports 。。。。的方式,
能不能不按你所说的, export const ms=module; //这里需要以命名方式导出,不能用默认方式导出
我的需求是通过npm包的形式 import 导入插件

望回复,写写。。。-、-、、、、

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注