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

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

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

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

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

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