diff --git a/src/components/Album.vue b/src/components/Album.vue index e9543e9..a7b18fa 100644 --- a/src/components/Album.vue +++ b/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; diff --git a/src/main.ts b/src/main.ts index f1ed253..c03c42a 100644 --- a/src/main.ts +++ b/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') diff --git a/src/store/albums/actions.ts b/src/store/albums/actions.ts new file mode 100644 index 0000000..681f072 --- /dev/null +++ b/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 +> { + +} diff --git a/src/store/albums/getters.ts b/src/store/albums/getters.ts new file mode 100644 index 0000000..2f8a693 --- /dev/null +++ b/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 { + +} diff --git a/src/store/albums/index.ts b/src/store/albums/index.ts new file mode 100644 index 0000000..0c28efa --- /dev/null +++ b/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; diff --git a/src/store/albums/muttations.ts b/src/store/albums/muttations.ts new file mode 100644 index 0000000..374aff0 --- /dev/null +++ b/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 { + updateAlbums(albumsData: IAlbum[]) { + this.state.albums = albumsData; + } +} diff --git a/src/store/albums/state.ts b/src/store/albums/state.ts new file mode 100644 index 0000000..4836a93 --- /dev/null +++ b/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; +} diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..aa0ffea --- /dev/null +++ b/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; + +const store: StoreType = createStore( + new Module({ + modules: { + albums, + } + }), + { + strict: process.env.NODE_ENV !== 'production', + } +) + +export default store; diff --git a/src/views/Album.vue b/src/views/Album.vue index c84561c..e2e24d6 100644 --- a/src/views/Album.vue +++ b/src/views/Album.vue @@ -1,17 +1,25 @@ diff --git a/src/views/Home.vue b/src/views/Home.vue index 012b32c..70d7411 100644 --- a/src/views/Home.vue +++ b/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({