Vuex 使用总结

1.安装 npm install vuex

2. 在 src 下面新建 文件夹 store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import count from './modules/count'Vue.use(Vuex)const store = new Vuex.Store({modules: {count: count}
})
export default store

新建 stroe/modules/count.js

const state = {count: 1,collapse: true
}
const getters = {getStateCount: function (state) {return state.count + 1}
}
const mutations = {add (state) {state.count += 1},reduce (state) {state.count -= 1},chage_collapse (state) {state.collapse = !state.collapse}
}
const actions = {addFun (context) {context.commit('add')},reduceFun (context) {context.commit('reduce')}
}export default {state,getters,mutations,actions
}二.使用

this.$store.state.count.count

this.$store.state.count.collapse

/*    addFun () {// this.$store.commit('add')// his.$store.dispatch('addFun')},reduceFun () {// this.$store.commit('reduce')this.$store.dispatch('reduceFun')}*/

使用助手函数 

import {mapState, mapGetters, mapActions} from 'vuex'

computed: {...mapState({count: state => state.count.count,collapse: state => state.count.collapse}),...mapGetters({getStateCount: 'getStateCount'})
},

methods: {...mapActions(['addFun', 'reduceFun'])}