vue3+vant4+vuex4入门案例

案例用的是vant-ui库，你可换成你自己用的ui库即可。

安装vuex依赖包
npm install vuex --save

main.js引用vuex，并挂载到vue中

import store from './store';
app.use(router).use(store);

 add.vue页面：

 1 <template>
 2   <h2>加法{{ $store.getters.showNum }}</h2>
 3   <h5>当前最新的count值为：{{ $store.state.count }}</h5>
 4   <van-row>
 5     <van-col span="4">
 6       <van-button type="primary" size="small" block @click="onClickAdd">+1</van-button>
 7     </van-col>
 8     <van-col span="4" offset="1">
 9       <van-button type="primary" size="small" block @click="onClickAddN">+N</van-button>
10     </van-col>
11 
12     <van-col span="4" offset="1">
13       <van-button type="primary" block @click="onClickAddAsync" size="small"
14         >异步</van-button
15       ></van-col
16     >
17     <van-col span="5" offset="1">
18       <van-button type="primary" block @click="onClickAddAsyncN" size="small"
19         >异步N</van-button
20       ></van-col
21     >
22   </van-row>
23 </template>
24 <script>
25 import { useStore } from 'vuex'
26 export default {
27   setup() {
28     const store = useStore()
29     function onClickAdd() {
30       store.commit('add')
31     }
32     function onClickAddN() {
33       store.commit('addN', 3)
34     }
35     function onClickAddAsync() {
36       store.dispatch('addAsync')
37     }
38     function onClickAddAsyncN() {
39       store.dispatch('addAsyncN', 5)
40     }
41     return {
42       onClickAdd,
43       onClickAddN,
44       onClickAddAsync,
45       onClickAddAsyncN,
46     }
47   },
48 }
49 </script>

 reduce.vue页面：

 1 <template>
 2   <h2>减法{{ showNum }}</h2>
 3   <h5>当前最新的count值为：{{ count }}</h5>
 4   <van-row>
 5     <van-col span="4">
 6       <van-button type="primary" size="small" block @click="reduce">-1</van-button>
 7     </van-col>
 8     <van-col span="4" offset="1">
 9       <van-button type="primary" size="small" block @click="reduceN(4)">-N</van-button>
10     </van-col>
11     <van-col span="4" offset="1">
12       <van-button type="primary" size="small" block @click="reduceAsync">异步</van-button>
13     </van-col>
14     <van-col span="5" offset="1">
15       <van-button type="primary" size="small" block @click="reduceAsyncN(5)"
16         >异步N</van-button
17       >
18     </van-col>
19   </van-row>
20 </template>
21 <script>
22 import { useStore, mapState, mapMutations, mapActions, mapGetters } from 'vuex'
23 export default {
24   setup() {
25     const store = useStore()
26   },
27   methods: {
28     ...mapMutations(['reduce', 'reduceN']),
29     ...mapActions(['reduceAsync', 'reduceAsyncN']),
30   },
31   computed: {
32     ...mapState(['count']),
33     ...mapGetters(['showNum']),
34   },
35 }
36 </script>

            

                   QQ群：659182980                                               微信群 ：扫一扫即可添加入群

         欢迎扫码加群，一起讨论，共同学习成长！

posted @ 2023-06-05 21:04  此夏_唯美  阅读(349)  评论(0)  编辑  收藏  举报