Skip to content

Commit 89ec7c3

Browse files
ba0708ba0708
committed
Initial commit
0 parents  commit 89ec7c3

File tree

12 files changed

+315
-0
lines changed

12 files changed

+315
-0
lines changed

‎.babelrc

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
["latest", {
4+
"es2015": { "modules": false }
5+
}],
6+
[ "stage-2" ]
7+
]
8+
}

‎.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
.idea/

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Vuex
2+
3+
This repository contains the code for the Vuex section from the [Vue.js: From Beginner to Professional course](https://l.codingexplained.com/course/vuejs?src=github).i

‎index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vuex Inc.</title>
6+
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="/dist/build.js"></script>
11+
</body>
12+
</html>

‎package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "codingexplained-vuex",
3+
"description": "A Vue.js project",
4+
"version": "1.0.0",
5+
"author": "Bo Andersen <[email protected]>",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
9+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10+
},
11+
"dependencies": {
12+
"body-parser": "^1.17.1",
13+
"bootstrap": "^3.3.7",
14+
"cors": "^2.8.3",
15+
"express": "^4.15.2",
16+
"vue": "^2.2.1",
17+
"vue-router": "^2.3.1",
18+
"vuex": "^2.2.1"
19+
},
20+
"devDependencies": {
21+
"babel-core": "^6.0.0",
22+
"babel-loader": "^6.0.0",
23+
"babel-preset-latest": "^6.0.0",
24+
"babel-preset-stage-2": "^6.24.1",
25+
"concurrently": "^3.4.0",
26+
"cross-env": "^3.0.0",
27+
"css-loader": "^0.25.0",
28+
"file-loader": "^0.9.0",
29+
"vue-loader": "^11.1.4",
30+
"vue-template-compiler": "^2.2.1",
31+
"webpack": "^2.2.0",
32+
"webpack-dev-server": "^2.2.0"
33+
}
34+
}

‎src/App.vue

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div class="container">
3+
<nav class="navbar navbar-default">
4+
<div class="container-fluid">
5+
<div class="navbar-header">
6+
<router-link to="/" exact class="navbar-brand"><strong>Vuex Inc.</strong></router-link>
7+
</div>
8+
9+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
10+
<ul class="nav navbar-nav"></ul>
11+
12+
<div class="nav navbar-nav navbar-right">
13+
<button v-if="!isLoggedIn" @click="login" class="btn btn-success">
14+
Log in
15+
</button>
16+
<button v-else @click="logout" class="btn btn-primary">
17+
Log out
18+
</button>
19+
</div>
20+
</div>
21+
</div>
22+
</nav>
23+
24+
<router-view></router-view>
25+
</div>
26+
</template>
27+
28+
<script>
29+
import { mapGetters } from 'vuex';
30+
import { mapActions } from 'vuex';
31+
32+
export default {
33+
computed: {
34+
...mapGetters({
35+
isLoggedIn: 'user/isLoggedIn'
36+
})
37+
},
38+
methods: {
39+
...mapActions('user', {
40+
login: 'login',
41+
logout: 'logout'
42+
})
43+
}
44+
}
45+
</script>
46+
47+
<style>
48+
.flex { display: flex; }
49+
.flex.flex-column { flex-direction: column; }
50+
.flex.flex-row { flex-direction: row; }
51+
.flex.justify-center { justify-content: center; }
52+
.flex.justify-left { justify-content: flex-start; }
53+
.flex.justify-right { justify-content: flex-end; }
54+
.flex.align-center { align-items: center; }
55+
.flex.align-left { align-items: flex-start; }
56+
.flex.align-right { align-items: flex-end; }
57+
58+
/* Navigation */
59+
.navbar .navbar-right > * {
60+
float: right;
61+
}
62+
</style>

‎src/blog/components/ListPosts.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div>
3+
<h2 v-for="post in posts">
4+
{{ post.title }} (ID: {{ post.id }})
5+
</h2>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
computed: {
12+
posts() {
13+
return this.$store.state.blog.posts;
14+
}
15+
}
16+
}
17+
</script>

‎src/blog/store/blog.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default {
2+
namespaced: true,
3+
state: {
4+
posts: [
5+
{ id: 1, title: 'Vue.js is Awesome' },
6+
{ id: 2, title: 'Vuex is Pretty Nice Too' },
7+
{ id: 3, title: 'New Version of Vue.js Released' }
8+
]
9+
}
10+
};

‎src/main.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Vue from 'vue';
2+
import Vuex from 'vuex';
3+
import VueRouter from 'vue-router';
4+
import App from './App.vue';
5+
import { routes } from './routes';
6+
import BlogModule from './blog/store/blog';
7+
import UserModule from './user/store/user';
8+
9+
Vue.use(Vuex);
10+
Vue.use(VueRouter);
11+
12+
const router = new VueRouter({
13+
routes: routes,
14+
mode: 'history',
15+
scrollBehavior(to, from, savedPosition) {
16+
if (to.hash) {
17+
return {
18+
selector: to.hash
19+
};
20+
}
21+
22+
if (savedPosition) {
23+
return savedPosition;
24+
}
25+
26+
return { x: 0, y: 0 };
27+
}
28+
});
29+
30+
const store = new Vuex.Store({
31+
modules: {
32+
blog: BlogModule,
33+
user: UserModule
34+
},
35+
state: {
36+
isBanned: false
37+
},
38+
mutations: {
39+
login(state) {
40+
console.log("login (root)");
41+
}
42+
},
43+
getters: {
44+
isBanned(state) {
45+
return state.isBanned;
46+
}
47+
}
48+
});
49+
50+
new Vue({
51+
el: '#app',
52+
render: h => h(App),
53+
router: router,
54+
store: store
55+
});

‎src/routes.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import ListPosts from './blog/components/ListPosts.vue';
2+
3+
export const routes = [
4+
{ path: '', component: ListPosts },
5+
{ path: '*', component: { template: '<h1>Page Not Found!</h1>' } }
6+
];

‎src/user/store/user.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export default {
2+
namespaced: true,
3+
state: {
4+
isLoggedIn: false
5+
},
6+
getters: {
7+
isLoggedIn(state, getters, rootState, rootGetters) {
8+
return state.isLoggedIn;
9+
}
10+
},
11+
mutations: {
12+
login(state) {
13+
console.log("login (user)");
14+
state.isLoggedIn = true;
15+
},
16+
logout(state) {
17+
state.isLoggedIn = false;
18+
}
19+
},
20+
actions: {
21+
login({ state, commit, rootState, rootGetters }) {
22+
if (!rootGetters.isBanned) {
23+
commit('login', null, { root: true });
24+
} else {
25+
alert("Get outta here!");
26+
}
27+
},
28+
logout({ state, commit, rootState }) {
29+
commit('logout');
30+
}
31+
}
32+
};

‎webpack.config.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: './src/main.js',
6+
output: {
7+
path: path.resolve(__dirname, './dist'),
8+
publicPath: '/dist/',
9+
filename: 'build.js'
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.vue$/,
15+
loader: 'vue-loader',
16+
options: {
17+
loaders: {
18+
}
19+
// other vue-loader options go here
20+
}
21+
},
22+
{
23+
test: /\.js$/,
24+
loader: 'babel-loader',
25+
exclude: /node_modules/
26+
},
27+
{
28+
test: /\.(png|jpg|gif|svg)$/,
29+
loader: 'file-loader',
30+
options: {
31+
name: '[name].[ext]?[hash]'
32+
}
33+
}
34+
]
35+
},
36+
resolve: {
37+
alias: {
38+
'vue$': 'vue/dist/vue.esm.js'
39+
}
40+
},
41+
devServer: {
42+
historyApiFallback: true,
43+
noInfo: true
44+
},
45+
performance: {
46+
hints: false
47+
},
48+
devtool: '#eval-source-map'
49+
}
50+
51+
if (process.env.NODE_ENV === 'production') {
52+
module.exports.devtool = '#source-map'
53+
// http://vue-loader.vuejs.org/en/workflow/production.html
54+
module.exports.plugins = (module.exports.plugins || []).concat([
55+
new webpack.DefinePlugin({
56+
'process.env': {
57+
NODE_ENV: '"production"'
58+
}
59+
}),
60+
new webpack.optimize.UglifyJsPlugin({
61+
sourceMap: true,
62+
compress: {
63+
warnings: false
64+
}
65+
}),
66+
new webpack.LoaderOptionsPlugin({
67+
minimize: true
68+
})
69+
])
70+
}

0 commit comments

Comments
 (0)