VUEX 入门（组件写法）

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中

{{count}}

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中写法如下

@click = "reduce"> 点我呀

3.总结

是入门级的小白参考，更多方法参见文档 或者

https://juejin.im/entry/59191b6b0ce4630069f6a3ad