1. 简述
VUEX网上有不少教程，我也看了官方和不少博客的教程，但是还是看的不爽，因为总是用全局的写法，而实际我们通常都是用组件开发的，我还是写一组件开发的例子出来，主要是刚入门的小白看的。
2.安装 引入
1.在main.js中
import Vuex from 'vuex'
Vue.use(Vuex)
2.建立store.js文件
在store文件夹下建立store.js文件
// 1.引入
import Vue from 'vue';
import Vuex from ‘’vuex';
// 2.定义
const state= {
count:1
} // state相当于data是公用数据地方
const mutations = {
add(state){
state.count++
}
reduce(state){
state.count--
}
} // mutatiions 是方法 s
// 3.实例化导出
export default new Vuex.Store({
state,mutations
})
这个最简单的store.js就建立好了，在组件使用
3.在组件中使用vuex
1.组件中如何引用store.js中count的值？
通常有两种写法，写法1 在demo.vue中
template中
<span> {{count}}</span>
script中 因为我们在main中已经全局注册了$store 在this中直接拿就可以了
一、通过computed的计算属性直接赋值
computed : {
count(){
return this.$store.count
}}
二、通过mapState的对象来赋值
我们首先要用import引入mapState。 注意这里import的是vuex 而不是store
import { mapState } from 'vuex';
三、通过mapState的数组来赋值
computed : mapState (["count"])
mapState还可以这样写 （推荐写法 ...是ES6语法）
computed:{...mapState(['count'])}
1.组件中使用模板Mutations方法
1.在模板count.vue里用import 引入我们的mapMutations：
import { mapState ,mapMutations } from 'vuex';
2.methods中添加如下方法标签里添加methods属性，并加入mapMutations在模板的标签里添加methods属性，并加入mapMutations标签里添加methods属性，并加入mapMutations
methods: mapMutations( ['add','reduce'] ),
其实我更推荐下面这个写法（这种写法包括上面的实际指的是，store.js中的方法和我这里同名，当然可以不同同名，用as既可，详见文档）
methods:{ ...mapMutations( ['add','reduce'] )}
在template中写法如下
<button> @click = "reduce"> 点我呀 <button>
3.总结
是入门级的小白参考，更多方法参见文档 或者
