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

保存进度！

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

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

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

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

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

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

@ -1,8 +1,9 @@
<!-- eslint-disable no-unused-vars -->
<!--
* @Author: Kane
* @Date: 2022-11-29 13:10:21
* @LastEditors: Kane
* @LastEditTime: 2022-11-29 15:29:07
* @LastEditTime: 2022-11-29 16:07:22
* @FilePath: \hello-cli\src\components\vuex\App2.vue
* @Description:
*
@ -10,12 +11,15 @@
-->
<template>
<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>
</div>
</template>
<script>
//引入mapState
//import { mapState } from "vuex";
export default {
name: "App-2",
data() {
@ -28,6 +32,11 @@ export default {
this.$store.commit("increment");
},
},
computed: {
storeCount() {
return this.$store.state.count;
},
},
};
</script>
<style scoped>

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

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