Skip to content

Commit 9cd6c37

Browse files
committed
Readme update for vuex stores
1 parent cbcf1cf commit 9cd6c37

File tree

1 file changed

+41
-9
lines changed

1 file changed

+41
-9
lines changed

README.md

+41-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<img align="right" src="https://cloud.githubusercontent.com/assets/187726/25786548/f88e486c-335c-11e7-8af0-8a7c470e4112.png" width="350">
22

3-
<!-- MarkdownTOC autolink="true" bracket="round" -->
3+
<!-- MarkdownTOC autolink="true" bracket="round" depth="1" -->
44

55
- [Overview](#overview)
66
- [Phase 1 - Stock Vuejs front end](#phase-1---stock-vuejs-front-end)
@@ -10,15 +10,16 @@
1010
- [Phase 5 - Vue TodoMVC modifications for rest model](#phase-5---vue-todomvc-modifications-for-rest-model)
1111
- [Phase 6 - Use v-model axios rest wrapper. Add error checking](#phase-6---use-v-model-axios-rest-wrapper-add-error-checking)
1212
- [Phase 7 - vue-router](#phase-7---vue-router)
13-
- [Phase 8 - vuex](#phase-8---vuex)
13+
- [Phase 8 - Vanilla Store](#phase-8---vanilla-store)
14+
- [Phase 9 - Vuex Store](#phase-9---vuex-store)
15+
- [Reference](#reference)
1416

1517
<!-- /MarkdownTOC -->
1618

1719
## Overview
1820

19-
Takes the [Vue].js TodoMVC example and modifies it to use a [Grails] app to store the data.
20-
TodoMVC examples from the poc site http://todomvc.com/
21-
We use this one as a basis for the code https://vuejs.org/v2/examples/todomvc.html
21+
This is a project I used to attemp to learn the basics of Vue. I consider one of those neccesarry basics to be how to communicate using a rest api with [Grails][]. I takes the [Vue.js][Vue] TodoMVC example and modifies it to use a [Grails] app to store the data.
22+
TodoMVC example initially taken from the poc site http://todomvc.com/ bubt then ended up using this one as a basis for the code https://vuejs.org/v2/examples/todomvc.html Take a look at the end of this artcle for other links and projects I used as examples and tutorials.
2223

2324
## Phase 1 - Stock Vuejs front end
2425
https://github.com/basejump/grails-vue-todomvc/tree/Phase1-vue-init-webpack
@@ -177,14 +178,20 @@ see [this commit](https://github.com/basejump/grails-vuejs-todomvc-example/commi
177178

178179
2. Update main.js per commits to add the router. The docs were light on this as most examples talked about how to tie the routes to the componenets to show. Turns out its optional and we can use the `$router` var that get injected into the Vue.
179180

181+
## Phase 8 - Vanilla Store
180182

181-
## Phase 8 - vuex
183+
See this [branch](https://github.com/basejump/grails-vuejs-todomvc-example/tree/vanilla-store) for working example
182184

183-
See this [branch](https://github.com/basejump/grails-vuejs-todomvc-example/tree/vuex) for working example
185+
* using `yarn` now, so intall yarn and just run that. must faster with caching.
186+
* abstract out a generic store
184187

185-
8a - get vuex working with local storage
188+
## Phase 9 - Vuex Store
186189

187-
8b - [Grails] rest storage
190+
See this [branch](https://github.com/basejump/grails-vuejs-todomvc-example/tree/vuex-store for working example
191+
192+
`npm -S install vuex`
193+
194+
working with both local and rest storage
188195

189196

190197
**Inspiration Articles/Docs**
@@ -197,10 +204,35 @@ See this [branch](https://github.com/basejump/grails-vuejs-todomvc-example/tree/
197204
**Inspiration Projects and Examples**
198205

199206
* The [vuex example](https://github.com/vuejs/vuex/tree/dev/examples/todomvc) in the main source
207+
* another vuex with JSX example https://github.com/codingcampbell/todomvc-vue
200208
* https://github.com/christianmalek/vuex-rest-api
201209
* complicated project with modules (in chinese) https://github.com/jackhutu/jackblog-vue/tree/master/src/vuex
202210
* old but good examples https://github.com/pablohpsilva/Goal
203211

212+
## Reference
213+
214+
#### examples TodoMVC inspiration
215+
216+
super simple https://github.com/addyosmani/vue-cli-todomvc
217+
older but has components examples and test examples https://github.com/allenmyao/vuejs-todomvc/tree/master/src
218+
vuex example with JSX, also shows SCSS style use https://github.com/codingcampbell/todomvc-vue
219+
220+
#### Admin Dashobards
221+
front end comparison https://docs.google.com/spreadsheets/d/13WhGNOu9S207TmhkL4xhCHV0tlDg-rCzR0VeaspS8QQ/edit#gid=541415243
222+
https://quasar-admin.firebaseapp.com/#/
223+
https://github.com/prograhammer/example-vue-project
224+
225+
#### Testing
226+
https://www.coding123.org/mock-vuex-in-vue-unit-tests/
227+
https://alligator.io/vuejs/testing-vuex-vue/
228+
229+
#### App Structure basis
230+
https://github.com/Plortinus/vue-multiple-pages
231+
Nuxt.js
232+
https://github.com/prograhammer/example-vue-project
233+
234+
#### Tutorials
235+
http://matthiashager.com/complete-vuejs-application-tutorial
204236

205237
[Vuex]: https://vuex.vuejs.org/en/
206238
[axios]: https://github.com/mzabriskie/axios

0 commit comments

Comments
 (0)