Kane
/
vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

保存进度！

This commit is contained in:
Kane Wang 2022-11-29 20:23:35 +08:00
parent 78b1aa52f2
commit 7e0f78c80e
6 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
入门/cli/hello-cli/public/css/app.css → 入门/cli/hello-cli/public/css/page.css
View File

6
入门/cli/hello-cli/public/index.html
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-11-22 17:50:49 * @Date: 2022-11-22 17:50:49
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-11-29 15:28:38 * @LastEditTime: 2022-11-29 17:46:54
* @FilePath: \hello-cli\public\index.html * @FilePath: \hello-cli\public\index.html
* @Description: * @Description:
* *
@ -18,11 +18,11 @@
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="<%= BASE_URL %>css/root.css" /> <link rel="stylesheet" href="<%= BASE_URL %>css/root.css" />
<link rel="stylesheet" href="<%= BASE_URL %>css/normalize.css" /> <link rel="stylesheet" href="<%= BASE_URL %>css/normalize.css" />
<link rel="stylesheet" href="<%= BASE_URL %>css/app.css" /> <link rel="stylesheet" href="<%= BASE_URL %>css/page.css" />
</head> </head>
<style> <style>
.v-cloak { .v-cloak {
display: none; /* display: none; */
} }
</style> </style>
<body> <body>

23
入门/cli/hello-cli/src/App.vue
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-11-22 17:50:49 * @Date: 2022-11-22 17:50:49
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-11-29 13:25:47 * @LastEditTime: 2022-11-29 17:50:22
* @FilePath: \hello-cli\src\App.vue * @FilePath: \hello-cli\src\App.vue
* @Description: * @Description:
* *
@ -10,9 +10,11 @@
--> -->
<template> <template>
<div class="content"> <div class="content">
<App1></App1> <h1>学习vuex</h1>
<App2></App2> <div><App1></App1> <App2></App2></div>
<el-button type="warning" @click="onClearCount">清零</el-button>
</div> </div>
<hr />
</template> </template>
<script> <script>
@ -25,15 +27,23 @@ export default {
App1, App1,
App2, App2,
}, },
methods: {
onClearCount() {
this.$store.commit("clearCount");
},
},
}; };
</script> </script>
<style> <style>
#app { #app {
background-color: #f4f5f7;
}
.content {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #f4f5f7;
width: 40rem; width: 40rem;
margin: 0px auto; margin: 0px auto;
border-radius: 5px; border-radius: 5px;
@ -47,4 +57,9 @@ export default {
#app div > * + * { #app div > * + * {
margin-left: 1rem; margin-left: 1rem;
} }
hr {
width: 100%;
border: 1px solid 1px;
}
</style> </style>

9
入门/cli/hello-cli/src/components/vuex/App1.vue
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-11-29 11:36:29 * @Date: 2022-11-29 11:36:29
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-11-29 15:26:38 * @LastEditTime: 2022-11-29 15:51:01
* @FilePath: \hello-cli\src\components\vuex\App1.vue * @FilePath: \hello-cli\src\components\vuex\App1.vue
* @Description: * @Description:
* *
@ -10,12 +10,14 @@
--> -->
<template> <template>
<div class="container"> <div class="container">
<h1>计数器一：{{ this.$store.state.count }}</h1> <h1>计数器一：{{ storeCount }}</h1>
<el-button type="primary" v-on:click="addCount()">更新计数器</el-button> <el-button type="primary" v-on:click="addCount()">更新计数器</el-button>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from "vuex";
export default { export default {
name: "App-1", name: "App-1",
data() { data() {
@ -28,6 +30,9 @@ export default {
this.$store.commit("increment"); this.$store.commit("increment");
}, },
}, },
computed: mapState({
storeCount: "count",
}),
}; };
</script> </script>
<style scoped> <style scoped>

13
入门/cli/hello-cli/src/components/vuex/App2.vue
View File

@ -1,8 +1,9 @@
<!-- eslint-disable no-unused-vars -->
<!-- <!--
* @Author: Kane * @Author: Kane
* @Date: 2022-11-29 13:10:21 * @Date: 2022-11-29 13:10:21
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-11-29 15:29:07 * @LastEditTime: 2022-11-29 16:07:22
* @FilePath: \hello-cli\src\components\vuex\App2.vue * @FilePath: \hello-cli\src\components\vuex\App2.vue
* @Description: * @Description:
* *
@ -10,12 +11,15 @@
--> -->
<template> <template>
<div class="container"> <div class="container">
<h1>计数器二：{{ this.$store.state.count }}</h1> <h1>计数器二：{{ this.$store.getters.countText }}</h1>
<el-button type="danger" v-on:click="addCount()">更新计数器</el-button> <el-button type="danger" v-on:click="addCount()">更新计数器</el-button>
</div> </div>
</template> </template>
<script> <script>
//引入mapState
//import { mapState } from "vuex";
export default { export default {
name: "App-2", name: "App-2",
data() { data() {
@ -28,6 +32,11 @@ export default {
this.$store.commit("increment"); this.$store.commit("increment");
}, },
}, },
computed: {
storeCount() {
return this.$store.state.count;
},
},
}; };
</script> </script>
<style scoped> <style scoped>

12
入门/cli/hello-cli/src/main.js
View File

@ -2,7 +2,7 @@
* @Author: Kane * @Author: Kane
* @Date: 2022-11-22 17:50:49 * @Date: 2022-11-22 17:50:49
* @LastEditors: Kane * @LastEditors: Kane
* @LastEditTime: 2022-11-29 15:23:25 * @LastEditTime: 2022-11-29 16:14:35
* @FilePath: \hello-cli\src\main.js * @FilePath: \hello-cli\src\main.js
* @Description: * @Description:
* *
@ -24,8 +24,16 @@ const vuex = createStore({
mutations: { mutations: {
increment(state) { increment(state) {
state.count++; state.count++;
},
clearCount(state) {
state.count = 0;
} }
} },
getters: {
countText(store) {
return store.count + "次";
},
},
}); });
app.use(vuex); app.use(vuex);
app.use(ElementPlus); app.use(ElementPlus);