个人笔记-----Vuex创建store.js和使用（ 2 ）【如有不对，欢迎指正】

1，在store.js中引用vue和vuex，并且使用vuex，

import vue from 'vue'
import vuex from 'vuex'

2，使用vuex Vue.use(Vuex)

3，创建store实例 const store = new Vue.Store({ })

const store = new Vue.Store({
    state:{
        count:1
    },
    mutation:{
        increment(state){
            state.count++
        }
    }
})

4，将store暴露出去 export default store

---

state

定义数据state，state相当于vue实例中的 data
在 state 中定义数据 state:{ count:1 },

在DOM中使用 {{ this.$store.state.count }}

mutation

在 mutation数据 中定义方法，类似于 vue 中的 methods，

	 mutations:{
        increment(state){  //参数是 state
            state.count++
        }
    }

getter

它的作用类似computed，它依赖一个数据项，当这个数据项改变的时候他才回去重新渲染，重新返回数值。

	getters:{
        gettersCount(state){ //参数是 state
            return state.count*2
        }
    }

在DOM中使用 this.$store.getters.gettersCount
gettersCount是getters里面的 方法

action

action类似mutation，action不会直接去变化state里面的数据，是先提交给mutation，然后由mutation直接去改变state的数据。

	actions:{
        actionsCount(context){ //参数 context
            context.$commit('increment')
        }
    }
    
	它的流程和mutations里面的流程是不一样的，
	他会先触发 actions 里面的 actionsCount 这个方法，
	然后再触发 mutations 里面的 increment 方法

需要去触发 mutations 理的数据，同时的触发也是用 $commit(‘mutations 里的方法’)

context.$commit('increment')

在DOM中使 this.$store.dispatch(‘actions里面的方法’)

this.$store.dispatch('actionsCount')

https://vuex.vuejs.org/zh/guide/state.html