Skip to content

Commit acfac57

Browse files
nevesneves
committed
init
0 parents  commit acfac57

22 files changed

+745
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Vuex Complete API CheatSheet
2+
3+
![Vuex CheatSheet](https://cdn-images-1.medium.com/max/1776/1*jaJ6yhGVvrB96VPnSMKb_w.png)
4+
5+
[CheatSheet](http://vuejs-tips.github.io/vuex-cheatsheet)
6+
7+
[Original Article](https://medium.com/vuejs-tips/vuex-complete-api-cheatsheet-c581cba1eb1d)

‎build.config.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
html: {
3+
template: './src/index.html' // custom html
4+
},
5+
webpack: {
6+
devtool: false, // disable sourcemap
7+
output: {
8+
publicPath: ''
9+
},
10+
resolve: {
11+
alias: {
12+
'@': 'src' // shortcut to avoid ../../..
13+
}
14+
}
15+
}
16+
}

‎docs/client.001800a6.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/client.9dcefc97.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/clippy.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎docs/favico.png‎

4.08 KB
Loading

‎docs/index.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<html lang="en" prefix="og: http://ogp.me/ns#">
3+
<head>
4+
<title>Vuex CheatSheet</title>
5+
<meta charset="utf-8">
6+
<meta http-equiv="content-language" content="en">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<meta property="og:type" content="article" />
10+
<meta property="og:site_name" content="VueJs-Tips" />
11+
<meta property="og:title" content="Vuex CheatSheet" />
12+
<meta property="og:description" content="Complete API" />
13+
<meta property="og:url" content="https://medium.com/vuejs-tips/vuex-complete-api-cheatsheet-c581cba1eb1d" />
14+
<meta property="og:image" content="https://cdn-images-1.medium.com/max/400/1*jaJ6yhGVvrB96VPnSMKb_w.png" />
15+
16+
<link rel="icon" href="favico.png" type="image/x-icon">
17+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro" />
18+
<link href="client.9dcefc97.css" rel="stylesheet"></head>
19+
20+
<body>
21+
<div id="modal" class="hide-modal">
22+
<button class="hide-modal">&times;</button>
23+
<iframe id="iframe" name="iframe" src="https://vuex.vuejs.org/en/api.html"></iframe>
24+
</div>
25+
26+
<pre id="code-store">import Vuex from 'vuex'
27+
28+
export default new Vuex.Store({
29+
strict: true,
30+
plugins: [],
31+
modules: {},
32+
state: {},
33+
getters: {},
34+
mutations: {},
35+
actions: {}
36+
})
37+
</pre>
38+
39+
<pre id="code-import">import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'</pre>
40+
41+
<div id="app">
42+
<div class="columns">
43+
<div class="panel panel-entry">
44+
<h1>
45+
entry.js
46+
<a href="#" z-index="-1" class="copy" data-clipboard-target="#code-entry" data-tooltip="copy snippet">
47+
<img src="clippy.svg" width="28" height="28" />
48+
</a>
49+
</h1>
50+
<pre><code class="language-javascript" id="code-entry">import Vue from 'vue'
51+
import Vuex from 'vuex'
52+
import store from './store'
53+
54+
Vue.use(Vuex)
55+
56+
new Vue({
57+
el: '#app',
58+
store
59+
})</code></pre>
60+
</div>
61+
62+
<div class="panel panel-store">
63+
<h1>
64+
store.js
65+
<a href="#" z-index="-1" class="copy" data-clipboard-target="#code-store" data-tooltip="copy snippet">
66+
<img src="clippy.svg" width="28" height="28" />
67+
</a>
68+
</h1>
69+
<ul>
70+
<li><span>new</span> Vuex.Store<span>({</span></li>
71+
<li><a target="iframe" href="https://vuex.vuejs.org/en/strict.html">strict<span>: true,</span></a></li>
72+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-constructor-options">plugins<span>: [],</span></a></li>
73+
<li><a target="iframe" href="https://vuex.vuejs.org/en/modules.html">modules<span>: {},</span></a></li>
74+
<li><a target="iframe" href="https://vuex.vuejs.org/en/state.html">state<span>: {},</span></a></li>
75+
<li><a target="iframe" href="https://vuex.vuejs.org/en/getters.html">getters<span>: {},</span></a></li>
76+
<li><a target="iframe" href="https://vuex.vuejs.org/en/mutations.html">mutations<span>: {},</span></a></li>
77+
<li><a target="iframe" href="https://vuex.vuejs.org/en/actions.html">actions<span>: {},</span></a></li>
78+
<li><a target="iframe" href="https://vuex.vuejs.org/en/modules.html#namespacing">namespaced<span>: false</span></a></li>
79+
<li>
80+
<span>})</span>
81+
</li>
82+
</ul>
83+
</div>
84+
85+
<div class="panel panel-maps">
86+
<h1>
87+
import map
88+
<a href="#" z-index="-1" class="copy" data-tooltip="copy snippet" data-clipboard-target="#code-import">
89+
<img src="clippy.svg" width="28" height="28" />
90+
</a>
91+
</h1>
92+
<ul>
93+
<li><a target="iframe" href="https://vuex.vuejs.org/en/state.html#the-mapstate-helper">mapState<span>()</span></a></li>
94+
<li><a target="iframe" href="https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper">mapGetters<span>()</span></a></li>
95+
<li><a target="iframe" href="https://vuex.vuejs.org/en/mutations.html#committing-mutations-in-components">mapMutations<span>()</span></a></li>
96+
<li><a target="iframe" href="https://vuex.vuejs.org/en/actions.html#dispatching-actions-in-components">mapActions<span>()</span></a></li>
97+
</ul>
98+
</div>
99+
100+
<div class="panel panel-instance">
101+
<h1>Instance <small>store</small></h1>
102+
<ul>
103+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-properties">state</a></li>
104+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-properties">getters</a></li>
105+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">commit<span>()</span></a></li>
106+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">dispatch<span>()</span></a></li>
107+
</ul>
108+
</div>
109+
110+
<div class="panel panel-instance">
111+
<h1>Plugin Dev <small>store</small></h1>
112+
<ul>
113+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">replaceState<span>()</span></a></li>
114+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">watch<span>()</span></a></li>
115+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">subscribe<span>()</span></a></li>
116+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">registerModule<span>()</span></a></li>
117+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">unregisterModule<span>()</span></a></li>
118+
<li><a target="iframe" href="https://vuex.vuejs.org/en/hot-reload.html">hotUpdate<span>()</span></a></li>
119+
</ul>
120+
</div>
121+
122+
<div class="panel panel-context">
123+
<h1>Context Object</h1>
124+
<ul>
125+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-constructor-options">state</a></li>
126+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-constructor-options">rootState</a></li>
127+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-constructor-options">getters</a></li>
128+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-constructor-options">rootGetters</a></li>
129+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">commit<span>()</span></a></li>
130+
<li><a target="iframe" href="https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods">dispatch<span>()</span></a></li>
131+
</ul>
132+
</div>
133+
</div>
134+
</div>
135+
<script type="text/javascript" src="client.001800a6.js"></script></body>
136+
</html>

‎package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vuex-cheatsheet",
3+
"version": "0.1.0",
4+
"description": "Vuex Cheat Sheet",
5+
"main": "src/index.js",
6+
"scripts": {
7+
"dev": "vue build -c build.config.js ./src/index.js",
8+
"build": "vue build -c build.config.js --dist './docs/' --prod ./src/index.js",
9+
"compile": "yarn dist -- --disable-compress"
10+
},
11+
"keywords": ["vue", "vuex", "cheatsheet"],
12+
"author": "Marcos Neves <[email protected]> (https://medium.com/vuejs-tips)",
13+
"license": "MIT",
14+
"dependencies": {
15+
"clipboard": "^1.6.1",
16+
"minireset.css": "^0.0.2",
17+
"prismjs": "^1.6.0"
18+
}
19+
}

0 commit comments

Comments
 (0)