vuex使用 實現點擊按鈕進行加減


 1 //store.js
 2 /**
 3  * vuex配置
 4  */
 5 
 6 import Vue from 'vue'
 7 import Vuex from 'vuex'
 8 
 9 Vue.use(Vuex);
10 
11 //定義屬性(數據)
12 var state={
13     count:6
14 }
15 
16 //定義getters
17 var getters={
18     count(state){
19         return state.count;
20     },
21     isEvenOrOdd(state){
22         return state.count%2==0?'偶數':'奇數';
23     }
24 }
25 
26 //定義actions,要執行的操作,如流程判斷、異步請求等
27 const actions = {
28     increment(context){//包含:commit、dispatch、state
29         console.log(context);
30         // context.commmit()
31     },
32     // increment({commit,state}){
33     //     commit('increment'); //提交一個名為increment的變化,名稱可自定義,可以認為是類型名
34     // },
35     decrement({commit,state}){
36         if(state.count>10){
37             commit('decrement');
38         }
39     },
40     incrementAsync({commit,state}){
41         //異步操作
42         var p=new Promise((resolve,reject) => {
43             setTimeout(() => {
44                 resolve();
45             },3000);
46         });
47 
48         p.then(() => {
49             commit('increment');
50         }).catch(() => {
51             console.log('異步操作');
52         });
53     }
54 }
55 
56 //定義mutations,處理狀態(數據)的改變
57 const mutations={
58     increment(state){
59         state.count++;
60     },
61     decrement(state){
62         state.count--;
63     }
64 }
65 
66 //創建store對象
67 const store=new Vuex.Store({
68     state,
69     getters,
70     actions,
71     mutations
72 })
73 
74 //導出store對象
75 export default store;
 1 //main.js
 2 import Vue from 'vue'
 3 import App from './App.vue'
 4 
 5 import store from './store.js' //導入store對象
 6 
 7 new Vue({
 8   store, //配置store選項,指定為store對象,會自動將store對象注入到所有子組件中,在子組件中通過this.$store訪問該store對象
 9   el: '#app',
10   render: h => h(App)
11 })
 1 //App.vue
 2 <template>
 3   <div id="app">
 4     
 5     <button @click="increment">增加</button>
 6     <button @click="decrement">減小</button>
 7     <button @click="incrementAsync">增加</button>
 8     <p>當前數字為:{{count}}</p>
 9     <p>{{isEvenOrOdd}}</p>
10 
11   </div>
12 </template>
13 
14 <script>
15 import {mapState,mapGetters,mapActions} from 'vuex'
16 
17 export default {
18   name: 'app',
19   data () {
20     return {
21       msg: 'Welcome to Your Vue.js App'
22     }
23   },
24   //方式1:通過this.$store訪問
25   /*computed:{
26     count(){
27       return this.$store.state.count;
28     }
29   }*/
30   /*computed:mapState([
31     'count'
32   ]),*/
33   computed:mapGetters([
34       'count',
35       'isEvenOrOdd'
36   ]),
37   methods:mapActions([
38       'increment',
39       'decrement',
40       'incrementAsync'
41   ])
42 }
43 </script>
44 
45 <style>
46 #app {
47   font-family: 'Avenir', Helvetica, Arial, sans-serif;
48   -webkit-font-smoothing: antialiased;
49   -moz-osx-font-smoothing: grayscale;
50   text-align: center;
51   color: #2c3e50;
52   margin-top: 60px;
53 }
54 
55 h1, h2 {
56   font-weight: normal;
57 }
58 
59 ul {
60   list-style-type: none;
61   padding: 0;
62 }
63 
64 li {
65   display: inline-block;
66   margin: 0 10px;
67 }
68 
69 a {
70   color: #42b983;
71 }
72 </style>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM