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）。

 下面这种方式也可以实现效果

使用...mapState
<template>
  <div class="hello">
  <p>{{count}}</p>
  <button @click="decrement">-</button>
  <button @click="increment">+</button>
    <tab2 ></tab2>
  </div>
</template>

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

 使用mapState

<template>
  <div class="hello">
  <p>{{count}}</p>
  <button @click="reduce">-</button>
  <button @click="add">+</button>
    <tab2 ></tab2>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import Tab2 from '@/components/tab2/tab2'
export default {
  components:{Tab2},
  data () {
    return {
         
    }
  },
  /*computed:{
    ...mapState([
      'count'
    ])
  },*/
  computed:{
    ...mapState([
      'count'
    ])
  },
  methods:{
    ...mapMutations([
      'reduce',//store.js里面mutations里面这个名字要和这里保持一致
      'add'
    ])
  }
  
}
</script>

 getters

 store.js
 1 import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={
    count:0
}

const getters={
    count:function(state){
        return state.count+=100
    }
}

const mutations={
    reduce(state){
        state.count--;
    },
    add(state){
        state.count++;
    }
}

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

<template>
  <div class="hello">
  <p>{{count}}</p>
  <button @click="reduce">-</button>
  <button @click="add">+</button>
    <tab2 ></tab2>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import Tab2 from '@/components/tab2/tab2'
export default {
  components:{Tab2},
  data () {
    return {
         
    }
  },
  /*computed:{
    ...mapState([
      'count'
    ])
  },*/
  computed:{
    ...mapState([
      'count'
    ]),
    count(){
      return this.$store.getters.count; //方法一
    }
  },
  methods:{
    reduce(){
      this.$store.commit('reduce');
    },
    add(){
      this.$store.commit('add');
    }
  }
  /*methods:{
    ...mapMutations([
      'reduce',
      'add'
    ])
  }*/
}
</script>

mapGetters

<template>
  <div class="hello">
  <p>{{count}}</p>
  <button @click="reduce">-</button>
  <button @click="add">+</button>
    <tab2 ></tab2>
  </div>
</template>

<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
import Tab2 from '@/components/tab2/tab2'
export default {
  components:{Tab2},
  data () {
    return {
         
    }
  },
  /*computed:{
    ...mapState([
      'count'
    ])
  },*/
  computed:{
    ...mapState([
      'count'
    ]),
    ...mapGetters([
      "count" //方法二
    ])
    /*count(){
      return this.$store.getters.count
    }*/
  },
  methods:{
    reduce(){
      this.$store.commit('reduce');
    },
    add(){
      this.$store.commit('add');
    }
  }
  /*methods:{
    ...mapMutations([
      'reduce',
      'add'
    ])
  }*/
}
</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
})