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 } } export default new Vuex.Store({ state, mutations })
3.引入使用
vuex实例可以被引入到Vue实例和Vue组件中，引入后可以在this.$store中使用vuex
<template>
<div>
<!-- 通过$store.state获取仓库数据 -->
{{$store.state.count}}<br>
<!-- 通过computed mapState来简化数据写法 -->
{{count}}<br>
<!-- 通过$store.commit来触发仓库方法 -->
<button @click="$store.commit(‘add‘, 10)">+</button>
<!-- 通过methods mapMutation 来简化调用仓库方法 -->
<button @click="reduce(2)">-</button>
</div>
</template>
<script>
import store from ‘@/store‘
import { mapState, mapMutations } from ‘vuex‘
export default {
data () {
return {}
},
// 通过mapMutation来简化vuex数据获取
methods: {
...mapMutations([‘add‘, ‘reduce‘])
},
store,
// 通过mapState来简化vuex数据获取
computed: {
...mapState([‘count‘])
}
// computed: mapState({
// count: state => state.count
// })
// computed: {
// count () {
// return this.$store.state.count
// }
// }
}
</script>