导读

vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

Vuex核心概念

state

它是在store目录里的index.js里提供公共数据

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

组件访问state中数据的第一种方式，在add.vue组件中

this.$store.state.全局数据名称

在add的自定义组件中可以访问到这个全局数据

<template>
  <div>
      <h3>最新count值：{{$store.state.count}}</h3>
      <button>+1</button>
  </div>
</template>

组件访问state中数据的第二种方式，在add.vue组件中

<template>
  <div>
      <h3>最新count值：{{count}}</h3>
      <button>+1</button>
  </div>
</template>

<script>
// 从vuex中按需导入mapState函数
import {mapState} from 'vuex'
export default {
// 通过刚才导入的mapState函数，
// 将当前组件需要的全局数据，映射为当前组件的computed计算属性
computed:{
    ...mapState(['count'])
}
}
</script>

<style>

</style>

Mutation

用于变更Store中的数据

• 只能通过mutation变更Store数据，不可直接操作Store中的数据
• 可以集中监控所有数据的变化

在store目录里的index.js里提供公共数据并定义变更的状态

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state,outValue){
      state.count+=outValue
    }
  },
  actions: {
  },
  modules: {
  }
})

触发mutations的第一种方式，commit的作用就是调用某个mutation函数。在add.vue组件中

<template>
  <div>
      <h3>最新count值：{{$store.state.count}}</h3>
      <button @click="addbtn">+n</button>
  </div>
</template>

<script>
export default {
data() {
    return {
        
    }
},
methods: {
    addbtn(){
        //commit就是触发某个mutation函数
        this.$store.commit('add',3)
    }
},
}
</script>

<style>

</style>

触发mutations的第二种方式，在add.vue组件中

<template>
  <div>
    <h3>最新count值：{{ $store.state.count }}</h3>
    <button @click="addbtn">+1</button>
  </div>
</template>

<script>
// 从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  methods: {
    // 通过刚才导入的mapMutations函数，
    // 将需要的mutations函数，映射为当前组件的methods方法
    ...mapMutations(['add','sub']),
    addbtn(){
        //传入步长值3
        this.add(3)
    }
  },
}
</script>

<style></style>

Action

通过Action来异步操作变更数据，但是它还是要通过触发Mutation的方式间接变更数据。

在store里的index.js定义Action

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    }
  },
  actions: {
    addyiBu(context){
      setTimeout(()=>{
        //上面已经提到，只有mutations才有权利修改state中的数据,即add
        context.commit('add')
      },1000)
    }
  },
  modules: {
  }
})

触发actions的第一种方式，在add.vue组件中

<template>
  <div>
    <h3>最新count值：{{ $store.state.count }}</h3>
    <button @click="addbtn">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    addbtn(){
     //dispatch就是触发action
        this.$store.dispatch('addyiBu')
    }
  },
}
</script>

<style></style>

触发actions并传入参数

methods: {
  addbtn(){
      this.$store.dispatch('addyiBu',5)
  }
}

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state,outValue){
      state.count+=outValue
    }
  },
  actions: {
    addyiBu(context,outValue){
      setTimeout(()=>{
        context.commit('add',outValue)
      },1000)
    }
  },
  modules: {
  }
})

触发actions的第二种方式

<template>
  <div>
    <h3>最新count值：{{ $store.state.count }}</h3>
    <button @click="addbtn">+1</button>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  data() {
    return {}
  },
  methods: {
    //   将需要的actions函数映射为当前组件的methods方法
    ...mapActions(['addyiBu']),
    addbtn(){
        this.addyiBu(5)
    }
  },
}
</script>

<style></style>

Getter

用于对Store中已有的数据进行加工处理形成新的数据，不会更改原来的数据。

• 它可以对已有的数据加工处理后形成新的数据，类似于vue的计算属性
• Store中数据发生变化，Getter的数据也会跟着变化

定义getters

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state,outValue){
      state.count+=outValue
    }
  },
  actions: {
    addyiBu(context,outValue){
      setTimeout(()=>{
        context.commit('add',outValue)
      },1000)
    }
  },
  getters:{
    showCount(state){
      return '最新数据:'+state.count
    }
  },
  modules: {
  }
})

使用getters的第一种方式

{{$store.getters.showCount}}

使用getters的第二种方式

<template>
  <div>
    <h3>最新count值：{{showCount }}</h3>
    <button @click="addbtn">+1</button>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
export default {
  data() {
    return {}
  },
  methods: {
    //   将需要的actions函数映射为当前组件的methods方法
    ...mapActions(['addyiBu']),
    addbtn(){
        this.addyiBu(5)
    }
  },
  computed:{
    //   将需要用到的getter映射到当前的计算属性中
      ...mapGetters(['showCount'])
  }
}
</script>

<style></style>