zhw2590582 / chrome-extension-vuexTree

一个Chrome扩展,为 Vuex 实现类似 redux-devtools-extension 的状态树展示效果

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

chrome-extension-vuexTree

一个Chrome扩展,为 Vuex 实现类似 redux-devtools-extension 的状态树展示效果

预览

来自 vue2-elm

使用

在 “Chrome => 选项 => 更多工具 => 扩展程序” 中勾选 “开发者模式”。

直接拖放 vuexTree.crx 到插件目录。

或者在 "加载已解压的扩展程序" 中载入 "vuexTree" 目录。

然后在 Vue 中,在 store 后面添加一个订阅消息即可。

import store from './store';

store.subscribe((mutation, state) => {
  window.__VUEXTREE_GLOBAL_HOOK__ && window.__VUEXTREE_GLOBAL_HOOK__({
    type: '@update',
    mutation,
    state
  });
})

开发

安装依赖

$ npm install

开发模式:生成 'dev' 目录

$ npm run dev

发布目录:生成 'vuexTree' 目录

$ npm run build

发布crx:生成 'vuexTree.crx' 文件

$ npm run crx

依赖

d3-state-visualizer

About

一个Chrome扩展,为 Vuex 实现类似 redux-devtools-extension 的状态树展示效果


Languages

Language:JavaScript 78.2%Language:HTML 20.3%Language:CSS 1.5%