Add store

src/components/Album.vue

@@ -35,17 +35,10 @@
 import 'reflect-metadata';
 import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
 
+import { IAlbum } from '@/store/albums/state';
 
-export interface IAlbum {
-  name: string;
-  description: string;
-  protected: boolean;
 
-  folderName: string;
-  files: string[];
-}
-
-@Component
+@Component({})
 export default class Album extends Vue {
   @Prop({required: true}) public readonly data!: IAlbum;
 

src/main.ts

@@ -1,10 +1,14 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
+import Vue from 'vue';
+import App from './App.vue';
+
+import router from './router';
+import store, { StoreType } from '@/store';
 
 Vue.config.productionTip = false
 
+
 new Vue({
+  store,
   router,
   render: h => h(App)
 }).$mount('#app')

src/store/albums/actions.ts

@@ -0,0 +1,15 @@
+import { Actions } from 'vuex-smart-module';
+import Vue from 'vue';
+import { AxiosResponse, AxiosError } from 'axios';
+import AlbumsState from './state';
+import AlbumsGetters from './getters';
+import AlbumsMutations from './muttations';
+
+export default class AlbumsActions extends Actions<
+  AlbumsState,
+  AlbumsGetters,
+  AlbumsMutations,
+  AlbumsActions
+> {
+
+}

src/store/albums/getters.ts

@@ -0,0 +1,6 @@
+import { Getters } from 'vuex-smart-module';
+import AlbumsState from './state';
+
+export default class AlbumsGetters extends Getters<AlbumsState> {
+  
+}

src/store/albums/index.ts

@@ -0,0 +1,15 @@
+import { Module } from 'vuex-smart-module';
+import AlbumsState from './state';
+import AlbumsGetters from './getters';
+import AlbumsMutations from './muttations';
+import AlbumsActions from './actions';
+
+
+const authModule = new Module({
+  state: AlbumsState,
+  getters: AlbumsGetters,
+  mutations: AlbumsMutations,
+  actions: AlbumsActions,
+});
+
+export default authModule;

src/store/albums/muttations.ts

@@ -0,0 +1,8 @@
+import { Mutations } from 'vuex-smart-module';
+import AlbumsState, { IAlbum } from './state';
+
+export default class AlbumsMutations extends Mutations<AlbumsState> {
+  updateAlbums(albumsData: IAlbum[]) {
+    this.state.albums = albumsData;
+  }
+}

src/store/albums/state.ts

@@ -0,0 +1,12 @@
+export interface IAlbum {
+  name: string;
+  description: string;
+  protected: boolean;
+
+  folderName: string;
+  files: string[];
+}
+
+export default class AlbumsState {
+  albums: IAlbum[] | null = null;
+}

src/store/index.ts

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import * as Vuex from 'vuex';
+import { createStore, Module } from 'vuex-smart-module';
+
+import { Store } from 'vuex';
+
+import albums from './albums';
+import albumsState from './albums/state';
+
+
+Vue.use(Vuex);
+
+interface IStore {
+  albums: albumsState
+}
+
+export type StoreType = Store<IStore>;
+
+const store: StoreType = createStore(
+  new Module({
+    modules: {
+      albums,
+    }
+  }),
+  {
+    strict: process.env.NODE_ENV !== 'production',
+  }
+)
+
+export default store;

src/views/Album.vue

@@ -1,17 +1,25 @@
 <template>
   <div>
-    Album Page
+    <LeftBlock title="HOME" description="kreorg photos" picture="/pictures/home.jpg" :leftPanelClosed="leftPanelClosed"></LeftBlock>
+    
   </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
+import 'reflect-metadata';
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+import LeftBlock from '@/components/LeftBlock.vue';
+
 
 @Component({
   name: 'AlbumPage',
+  components: {
+    LeftBlock,
+  }
 })
 export default class AlbumPage extends Vue {
-
+  @Prop({required: true}) public readonly leftPanelClosed!: boolean;
 }
 </script>
 

src/views/Home.vue

@@ -14,7 +14,8 @@ import 'reflect-metadata';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import LeftBlock from '@/components/LeftBlock.vue';
-import Album, { IAlbum } from '@/components/Album.vue';
+import Album from '@/components/Album.vue';
+import { IAlbum } from '@/store/albums/state'
 
 
 @Component({