vuex學習

使用vuex作簡單的加減

 store.js
 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 
 4 Vue.use(Vuex)
 5 
 6 const state={ 7 count:0 8 } 9 const mutations={ 10  reduce(state){ 11 state.count--; 12  }, 13  add(state){ 14 state.count++; 15  } 16 } 17 export default new Vuex.Store({ 18  state, 19  mutations 20 })

.vue文件
<template>
  <div class="hello">
  <p>{{$store.state.count}}</p>
  <button @click="decrement">-</button>
  <button @click="increment">+</button>
    <tab2 ></tab2>
  </div>
</template>

<script> import store from '../store/index.js' import Tab2 from '@/components/tab2/tab2' export default { components:{Tab2}, data () { return { count:0 } },
 computed:{
　　count(){
　　　　return this.$store.state.count;
　　}
 }, methods: { decrement(){ this.$store.commit('reduce'); }, increment(){ this.$store.commit('add'); } } } </script>

效果

 

在組件中提交 Mutations

你能夠在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）。

 下面這種方式也能夠實現效果

 1 使用...mapState
 2 <template>
 3   <div class="hello">
 4   <p>{{count}}</p>
 5   <button @click="decrement">-</button>
 6   <button @click="increment">+</button>
 7     <tab2 ></tab2>
 8   </div>
 9 </template>
10 
11 <script>
12 /*import store from '../store/index.js'*/
13 import {mapState} from 'vuex'
14 import Tab2 from '@/components/tab2/tab2'
15 export default {
16   components:{Tab2},
17   data () {
18     return {
19          
20     }
21   },
22   computed:{
23     ...mapState([
24       'count'
25     ])
26   },
27   methods: {
28     decrement(){
29       this.$store.commit('reduce');
30     },
31     increment(){
32       this.$store.commit('add');
33     }
34   }
35 }
36 </script>

 使用mapState

 1 <template>
 2   <div class="hello">
 3   <p>{{count}}</p>
 4   <button @click="reduce">-</button>
 5   <button @click="add">+</button>
 6     <tab2 ></tab2>
 7   </div>
 8 </template>
 9 
10 <script>
11 import {mapState,mapMutations} from 'vuex'
12 import Tab2 from '@/components/tab2/tab2'
13 export default {
14   components:{Tab2},
15   data () {
16     return {
17          
18     }
19   },
20   /*computed:{
21     ...mapState([
22       'count'
23     ])
24   },*/
25   computed:{
26     ...mapState([
27       'count'
28     ])
29   },
30   methods:{
31     ...mapMutations([
32       'reduce',//store.js裏面mutations裏面這個名字要和這裏保持一致
33       'add'
34     ])
35   }
36   
37 }
38 </script>

 getters

 store.js
 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 
 4 Vue.use(Vuex)
 5 
 6 const state={
 7     count:0
 8 }
 9 
10 const getters={
11     count:function(state){
12         return state.count+=100
13     }
14 }
15 
16 const mutations={
17     reduce(state){
18         state.count--;
19     },
20     add(state){
21         state.count++;
22     }
23 }
24 
25 export default new Vuex.Store({
26     state,
27     mutations,
28     getters
29 })

 1 <template>
 2   <div class="hello">
 3   <p>{{count}}</p>
 4   <button @click="reduce">-</button>
 5   <button @click="add">+</button>
 6     <tab2 ></tab2>
 7   </div>
 8 </template>
 9 
10 <script>
11 import {mapState,mapMutations} from 'vuex'
12 import Tab2 from '@/components/tab2/tab2'
13 export default {
14   components:{Tab2},
15   data () {
16     return {
17          
18     }
19   },
20   /*computed:{
21     ...mapState([
22       'count'
23     ])
24   },*/
25   computed:{
26     ...mapState([
27       'count'
28     ]),
29     count(){
30       return this.$store.getters.count; //方法一
31     }
32   },
33   methods:{
34     reduce(){
35       this.$store.commit('reduce');
36     },
37     add(){
38       this.$store.commit('add');
39     }
40   }
41   /*methods:{
42     ...mapMutations([
43       'reduce',
44       'add'
45     ])
46   }*/
47 }
48 </script>

mapGetters

 1 <template>
 2   <div class="hello">
 3   <p>{{count}}</p>
 4   <button @click="reduce">-</button>
 5   <button @click="add">+</button>
 6     <tab2 ></tab2>
 7   </div>
 8 </template>
 9 
10 <script>
11 import {mapState,mapMutations,mapGetters} from 'vuex'
12 import Tab2 from '@/components/tab2/tab2'
13 export default {
14   components:{Tab2},
15   data () {
16     return {
17          
18     }
19   },
20   /*computed:{
21     ...mapState([
22       'count'
23     ])
24   },*/
25   computed:{
26     ...mapState([
27       'count'
28     ]),
29     ...mapGetters([
30       "count" //方法二
31     ])
32     /*count(){
33       return this.$store.getters.count
34     }*/
35   },
36   methods:{
37     reduce(){
38       this.$store.commit('reduce');
39     },
40     add(){
41       this.$store.commit('add');
42     }
43   }
44   /*methods:{
45     ...mapMutations([
46       'reduce',
47       'add'
48     ])
49   }*/
50 }
51 </script>

 actions

const actions={
    jianPlus({commit}){//寫法一
        commit('reduce')
    },
    jiaPlus(context){//寫法二
        context.commit('add',{a:11})
    }
}

.vue

methods:{
...mapMutations([
'reduce',
'add'
]),
...mapActions([
'jianPlus',
'jiaPlus'
])
}

 

方法四：

<template>
  <div class="hello">
    <p>{{count}}-------{{evenOrOdd}}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementIfOdd">Increment if odd</button>
      <button @click="incrementAsync">Increment async</button>
    </p>
  </div>
</template>

<script>
import {mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:{
    ...mapGetters([
      'count',
      'evenOrOdd'
    ])
  },
  methods:{
    increment(){
      this.$store.dispatch('increment')
    },
    decrement(){
      this.$store.dispatch('decrement')
    },
    incrementIfOdd(){
      this.$store.dispatch('incrementIfOdd')
    },
    incrementAsync(){
      this.$store.dispatch('incrementAsync')
    }
  }
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state={
    count:0
}

const getters={
    count(state){
        return state.count
    },
    evenOrOdd(state){
        return state.count%2 ===0 ? 'even':'odd'
    }
}

const mutations={
    increment(state){
        state.count++
    },
    decrement(state){
        state.count--
    }
}

const actions={
    increment({commit}){
        commit('increment')
    },
    decrement({commit}){
        commit('decrement')
    },
    incrementIfOdd({commit,state}){
        if((state.count+1)%2 ===0){
            commit('increment')
        }
    },
    incrementAsync({commit}){
        return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('increment')
        resolve()
      }, 1000)
    })
    }
}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})