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

学习vuex!

Browse Source
This commit is contained in:
Kane Wang 2022-11-29 15:29:41 +08:00
parent bd3a9dc825
commit 78b1aa52f2
4 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
入门/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 13:26:25
* @LastEditTime: 2022-11-29 15:28:38
* @FilePath: \hello-cli\public\index.html
* @Description:
*
@ -20,6 +20,11 @@
<link rel="stylesheet" href="<%= BASE_URL %>css/normalize.css" />
<link rel="stylesheet" href="<%= BASE_URL %>css/app.css" />
</head>
<style>
.v-cloak {
display: none;
}
</style>
<body>
<noscript>
<strong
@ -28,7 +33,7 @@
continue.</strong
>
</noscript>
<div id="app"></div>
<div id="app" class="v-cloak"></div>
<!-- built files will be auto injected -->
</body>
</html>

6
入门/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 14:04:19
* @LastEditTime: 2022-11-29 15:26:38
* @FilePath: \hello-cli\src\components\vuex\App1.vue
* @Description:
*
@ -10,7 +10,7 @@
-->
<template>
<div class="container">
<h1>计数器一：{{ count }}</h1>
<h1>计数器一：{{ this.$store.state.count }}</h1>
<el-button type="primary" v-on:click="addCount()">更新计数器</el-button>
</div>
</template>
@ -25,7 +25,7 @@ export default {
},
methods: {
addCount() {
this.count++;
this.$store.commit("increment");
},
},
};

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

@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2022-11-29 13:10:21
* @LastEditors: Kane
* @LastEditTime: 2022-11-29 14:04:50
* @LastEditTime: 2022-11-29 15:29:07
* @FilePath: \hello-cli\src\components\vuex\App2.vue
* @Description:
*
@ -10,8 +10,8 @@
-->
<template>
<div class="container">
<h1>计数器二：{{ count }}</h1>
<el-button type="primary" v-on:click="addCount()">更新计数器</el-button>
<h1>计数器二：{{ this.$store.state.count }}</h1>
<el-button type="danger" v-on:click="addCount()">更新计数器</el-button>
</div>
</template>
@ -25,7 +25,7 @@ export default {
},
methods: {
addCount() {
this.count++;
this.$store.commit("increment");
},
},
};

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

@ -2,19 +2,32 @@
* @Author: Kane
* @Date: 2022-11-22 17:50:49
* @LastEditors: Kane
* @LastEditTime: 2022-11-29 13:04:26
* @LastEditTime: 2022-11-29 15:23:25
* @FilePath: \hello-cli\src\main.js
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
import { createApp } from 'vue';
import { createStore } from "vuex";
import App from './App.vue';
import ElementPlus from "element-plus";
import 'element-plus/dist/index.css';
const app = createApp(App);
const vuex = createStore({
state() {
return {
count: 0,
};
},
mutations: {
increment(state) {
state.count++;
}
}
});
app.use(vuex);
app.use(ElementPlus);
app.mount('#app');