From 4c6b7ad3b85d262ad4c120959a8103d2e0f246e0 Mon Sep 17 00:00:00 2001 From: Cole Bemis <colebemis@gmail.com> Date: Sat, 28 Jan 2017 22:01:18 -0800 Subject: [PATCH] Add vuex --- package.json | 1 + src/App.vue | 6 +++++- src/main.js | 38 ++++++++++++++++++++++++-------------- 3 files changed, 30 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index f59510e..4e7236c 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "vue": "^2.1.10", "vue-loader": "^10.1.2", "vue-template-compiler": "^2.1.10", + "vuex": "^2.1.1", "webpack": "^2.2.0", "webpack-dev-server": "^1.16.2" } diff --git a/src/App.vue b/src/App.vue index ef8ccb0..095f60b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,11 @@ </template> <script> + import {mapState} from 'vuex'; + export default { - name: 'App' + name: 'App', + components: {Icon}, + computed: mapState(['icons']) } </script> \ No newline at end of file diff --git a/src/main.js b/src/main.js index 6609247..eb40bcc 100644 --- a/src/main.js +++ b/src/main.js @@ -1,14 +1,28 @@ import Vue from 'vue'; +import Vuex from 'vuex'; import App from './App'; -const data = { - icons: [ - 'square', - 'circle', - 'rectangle-vertical', - 'rectangle-horizontal' - ] -}; +const icons = [ + 'square', + 'circle', + 'rectangle-vertical', + 'rectangle-horizontal' +]; + +Vue.use(Vuex); + +const store = new Vuex.Store({ + state: { + icons + } +}); + +new Vue({ + el: '#app', + store, + components: {App}, + template: '<app/>' +}); // Vue.component('icon', { // props: { @@ -55,9 +69,5 @@ const data = { // template: '#icon-container-template' // }) -new Vue({ - el: '#app', - data: data, - components: {App}, - template: '<app/>' -}); \ No newline at end of file + + -- 2.21.0