created vuex modules

mustafadalga · mustafadalga · commit d355a1c140b1 · 2021-10-31T16:01:19.000+03:00
diff --git a/public/index.html b/public/index.html
@@ -5,13 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>How to Structure Vuex On Large Project</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
+    <div class="container">
     <div id="app"></div>
+    </div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,28 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
-  <router-view/>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <router-link class="nav-link" to="/">Home</router-link>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <router-view />
 </template>
 
+<script>
+import { mapActions } from "vuex";
+
+export default {
+  created(){
+    this.setMovies();
+  },
+  methods: {
+    ...mapActions('movies',['setMovies'])
+  }
+}
+</script>
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/Movie.vue b/src/components/Movie.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="card col-sm-4">
+    <img class="card-img-top" :src="`https://image.tmdb.org/t/p/original${movie.poster_path}`" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">{{ movie.title }}</h5>
+      <p class="card-text">{{ movie.overview.substr(0,100)+'...'  }}</p>
+      <a href="#" class="btn btn-primary">View</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Movie",
+  props: {
+    movie: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Movies.vue b/src/components/Movies.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="row">
+    <Movie  v-for="movie in getMovies" :movie="movie" :key="movie.id"/>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+import Movie from "@/components/Movie";
+export default {
+  name: "Movies",
+  components: { Movie },
+  computed: {
+    ...mapGetters('movies', [ 'getMovies' ])
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -7,14 +7,6 @@ const routes = [
     name: 'Home',
     component: Home
   },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
 ]
 
 const router = createRouter({
diff --git a/src/store/index.js b/src/store/index.js
@@ -1,12 +1,12 @@
 import { createStore } from 'vuex'
+import auth from './modules/auth';
+import movies from "./modules/movies";
+import notifications from "./modules/notifications";
 
 export default createStore({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
   modules: {
+    auth,
+    movies,
+    notifications
   }
 })
diff --git a/src/store/modules/auth/actions.js b/src/store/modules/auth/actions.js
@@ -0,0 +1,3 @@
+export default {
+    
+}
diff --git a/src/store/modules/auth/getters.js b/src/store/modules/auth/getters.js
@@ -0,0 +1,3 @@
+export default {
+    getUserInformation: (state) => state.user
+}
diff --git a/src/store/modules/auth/index.js b/src/store/modules/auth/index.js
@@ -0,0 +1,12 @@
+import state from './state';
+import getters from './getters';
+import mutations from './mutations';
+import actions from './actions'
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};
diff --git a/src/store/modules/auth/mutations.js b/src/store/modules/auth/mutations.js
@@ -0,0 +1,3 @@
+export default {
+
+}
diff --git a/src/store/modules/auth/state.js b/src/store/modules/auth/state.js
@@ -0,0 +1,10 @@
+export default {
+    user: {
+        id: 1,
+        username: 'mustafadalga',
+        email: 'mustafadalgaa@gmail.com',
+        fullName: 'Mustafa Dalga',
+        city:'Istanbul',
+        gender:'Male',
+    }
+}   
diff --git a/src/store/modules/movies/actions.js b/src/store/modules/movies/actions.js
@@ -0,0 +1,5 @@
+export default {
+    async setMovies({ commit }) {
+
+    }
+}
diff --git a/src/store/modules/movies/getters.js b/src/store/modules/movies/getters.js
@@ -0,0 +1,3 @@
+export default {
+    getMovies:(state)=>state.movies,
+}
diff --git a/src/store/modules/movies/index.js b/src/store/modules/movies/index.js
@@ -0,0 +1,12 @@
+import state from './state';
+import getters from './getters';
+import mutations from './mutations';
+import actions from './actions'
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};
diff --git a/src/store/modules/movies/mutations.js b/src/store/modules/movies/mutations.js
@@ -0,0 +1,3 @@
+export default {
+    setMovies:(state,movies)=>state.movies=movies,
+}
diff --git a/src/store/modules/movies/state.js b/src/store/modules/movies/state.js
@@ -0,0 +1,3 @@
+export default {
+  movies:[]
+}
diff --git a/src/store/modules/notifications/actions.js b/src/store/modules/notifications/actions.js
@@ -0,0 +1,3 @@
+export default {
+    
+}
diff --git a/src/store/modules/notifications/getters.js b/src/store/modules/notifications/getters.js
@@ -0,0 +1,2 @@
+export default {
+}
diff --git a/src/store/modules/notifications/index.js b/src/store/modules/notifications/index.js
@@ -0,0 +1,12 @@
+import state from './state';
+import getters from './getters';
+import mutations from './mutations';
+import actions from './actions'
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};
diff --git a/src/store/modules/notifications/mutations.js b/src/store/modules/notifications/mutations.js
@@ -0,0 +1,6 @@
+import notifications from ".";
+
+export default {
+    setNotification:(state,notification)=>state.notifications.push(notification),
+    removeNotifications:(state)=>state.notifications=[]
+}
diff --git a/src/store/modules/notifications/state.js b/src/store/modules/notifications/state.js
@@ -0,0 +1,3 @@
+export default {
+    notifications:[]
+}
diff --git a/src/views/About.vue b/src/views/About.vue
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,18 +1,14 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="home mt-5">
+    <Movies/>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
+import Movies from "@/components/Movies";
 export default {
   name: 'Home',
-  components: {
-    HelloWorld
-  }
+  components: { Movies },
 }
 </script>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ getUserInformation: (state) => state.user`
	`3`	`+}`