diff --git a/package.json b/package.json index f59510eebae135594c1c3cfc557a7a34603b0261..4e7236c1f0fcc1c4d134a479e05999454767956c 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 ef8ccb007ca1dee34b87b7046a53749b4a594b7e..095f60b14e30300e0fa5f765e91c750d7edea747 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 6609247a597b94466123787e8d4b0e14f003dda5..eb40bcc6b1c0e1e434cde2924dbe83c65c71e500 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 + +