vuex的使用

vuex其实可以看成一个公共的数据仓库，从作用来说大致上可以看成是我们的cookie或者localStorage，下面我们来看看怎么使用吧

1.安装

vuex不是vue内置的所以需要额外安装

npm i vuex --save

2.设置仓库

在src下面新建一个文件夹，这里我新建一个store/index.js,内容大致为：

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

Vue.use(Vuex)

const state = {
  count: 0
}

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

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

const actions = {
  aAdd (context) {
    context.commit('add', 6)
  }
}

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

3.引入使用

vuex实例可以被引入到Vue实例和Vue组件中，引入后可以在this.$store中使用vuex

<template>
  <div>
      <!-- 通过$store.state获取仓库数据 -->
      count:{{$store.state.count}}<br>
      <!-- 通过computed mapState来简化数据写法 -->
      count:{{count}}<br>
      count2:{{count2}}
      <!-- 通过$store.commit来触发仓库方法 -->
      <button @click="$store.commit('add', 10)">+</button>
       <!-- 通过methods mapMutation 来简化调用仓库方法 -->
      <button @click="reduce(2)">-</button><br>
      actions调用mutions的方法<button @click="aAdd">加</button>
  </div>
</template>

<script>
import store from '@/store'
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'

export default {
  data () {
    return {}
  },
  // 通过mapMutation来简化vuex数据获取
  methods: {
    ...mapMutations(['add', 'reduce']),
  // 用传对象的形式可以更加灵活
  //...mapMutations({
  //          count: state => state.count,
  //          countAlias: 'count',
  //    })
    ...mapActions(['aAdd'])
  },
  store,
  // 通过mapState来简化vuex数据获取
  computed: {
    ...mapState(['count']),
    ...mapGetters(['count2'])
    // count2 () {
    //   return this.$store.getters.count2
    // }
  }
  // computed: mapState({
  //   count: state => state.count
  // })
  // computed: {
  //   count () {
  //     return this.$store.state.count
  //   }
  // }
}
</script>

ps：map系列的方法既可以传入数组，也可以传入对象的形式

 

vuex主要内容包括：state(相当于data)、mutations(相当于methods)、getter(相当于computed)、actions(这个是调用mutation用的)、modules(大型应用使用，这里不演示了)