Skip to content

Commit d682823

Browse files
nil1729nil1729
committed
add vuex
1 parent 21bfe79 commit d682823

File tree

14 files changed

+11807
-0
lines changed

14 files changed

+11807
-0
lines changed

‎vue-noob-vuex/.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?

‎vue-noob-vuex/babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎vue-noob-vuex/package-lock.json‎

Lines changed: 11465 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vue-noob-vuex/package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "vue-noob-vuex",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"axios": "^0.19.2",
12+
"core-js": "^3.6.5",
13+
"vue": "^2.6.11",
14+
"vuex": "^3.5.1"
15+
},
16+
"devDependencies": {
17+
"@vue/cli-plugin-babel": "~4.4.0",
18+
"@vue/cli-plugin-eslint": "~4.4.0",
19+
"@vue/cli-service": "~4.4.0",
20+
"babel-eslint": "^10.1.0",
21+
"eslint": "^6.7.2",
22+
"eslint-plugin-vue": "^6.2.2",
23+
"vue-template-compiler": "^2.6.11"
24+
},
25+
"eslintConfig": {
26+
"root": true,
27+
"env": {
28+
"node": true
29+
},
30+
"extends": [
31+
"plugin:vue/essential",
32+
"eslint:recommended"
33+
],
34+
"parserOptions": {
35+
"parser": "babel-eslint"
36+
},
37+
"rules": {}
38+
},
39+
"browserslist": [
40+
"> 1%",
41+
"last 2 versions",
42+
"not dead"
43+
]
44+
}

‎vue-noob-vuex/public/favicon.ico‎

4.19 KB
Binary file not shown.

‎vue-noob-vuex/public/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
<link
10+
rel="stylesheet"
11+
href="https://bootswatch.com/4/united/bootstrap.min.css"
12+
/>
13+
</head>
14+
<body>
15+
<noscript>
16+
<strong>
17+
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
18+
properly without JavaScript enabled. Please enable it to continue.
19+
</strong>
20+
</noscript>
21+
<div id="app"></div>
22+
<!-- built files will be auto injected -->
23+
</body>
24+
</html>

‎vue-noob-vuex/src/App.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="container">
3+
<h1 class="text-success text-center">State Management with Vuex</h1>
4+
<hr class="my-2" />
5+
<app-result :counter="counter" />
6+
<app-counter @updated="counter+=$event" />
7+
<hr class="my-3" />
8+
<app-fetch-todos-btn />
9+
<app-todos />
10+
</div>
11+
</template>
12+
13+
<script>
14+
import counter from "./components/counter";
15+
import result from "./components/result";
16+
import fetchTodosBtn from "./components/FetchTodosBtn";
17+
import todos from "./components/Todos";
18+
export default {
19+
name: "App",
20+
components: {
21+
appCounter: counter,
22+
appResult: result,
23+
appFetchTodosBtn: fetchTodosBtn,
24+
appTodos: todos,
25+
},
26+
data() {
27+
return {
28+
counter: 0,
29+
};
30+
},
31+
mounted() {
32+
console.log(this.$store.state);
33+
},
34+
};
35+
</script>
36+
37+
<style>
38+
button {
39+
box-shadow: none !important;
40+
}
41+
::-webkit-scrollbar {
42+
width: 0;
43+
}
44+
</style>

‎vue-noob-vuex/src/assets/logo.png‎

6.69 KB
Loading

‎vue-noob-vuex/src/components/FetchTodosBtn.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="container">
3+
<button @click="fetchTodos(start+=10)" class="btn btn-sm btn-primary">Fetch Todos</button>
4+
<button
5+
@click="$store.commit('SET_TODO_TYPE', false)"
6+
class="btn btn-sm btn-warning text-dark ml-2"
7+
>Show All Todos</button>
8+
<button
9+
@click="$store.commit('SET_TODO_TYPE', true)"
10+
class="btn btn-sm btn-success ml-2"
11+
>Show Only Completed Todos</button>
12+
<button class="disabled btn btn-sm btn-info ml-2">{{ todoType }}</button>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import { mapActions, mapGetters } from "vuex";
18+
export default {
19+
name: "AppFetchTodosBtn",
20+
data() {
21+
return {
22+
start: -10,
23+
};
24+
},
25+
computed: {
26+
...mapGetters(["todoType"]),
27+
},
28+
methods: {
29+
...mapActions(["fetchTodos"]),
30+
},
31+
};
32+
</script>
33+
34+
<style>
35+
.disabled {
36+
pointer-events: none !important;
37+
}
38+
</style>

‎vue-noob-vuex/src/components/Todos.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<div class="container p-4">
3+
<h5 class="text-info">
4+
Total Todos:
5+
<span class="text-dark">{{ $store.state.todos.length }}</span>
6+
</h5>
7+
<h4 v-if="$store.state.loading" class="text-secondary text-center">Loading ...</h4>
8+
<ul v-else class="list-group">
9+
<div
10+
v-for="(todo, i) in todos"
11+
:key="todo.id"
12+
class="list-group-item list-group-item-action flex-column align-items-start"
13+
>
14+
<div class="d-flex w-100 justify-content-between">
15+
<h5 class="mb-1">
16+
<span class="text-danger">{{ i + 1 }}</span>
17+
{{ todo.title }}
18+
</h5>
19+
<small class="text-success">{{ !todo.completed ? '' : 'Completed'}}</small>
20+
</div>
21+
</div>
22+
</ul>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
name: "Todos",
29+
computed: {
30+
todos() {
31+
if (this.$store.state.showCompleted) {
32+
return this.$store.getters.completedTodos;
33+
} else {
34+
return this.$store.state.todos;
35+
}
36+
},
37+
},
38+
};
39+
</script>
40+
41+
<style scoped>
42+
.list-group-item {
43+
cursor: pointer;
44+
}
45+
</style>

0 commit comments

Comments
 (0)