VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。
一、vuex 安装
Npm安装Vuex
cnpm i vuex -S
二、构建仓库
在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js 和action.js、getters.js、mutations.js、和一个modules文件，这样做的好处就在于能够很好的对各个功能进行维护。
index.js文件下
-----------------------
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
import moduleA from './modules/modulesA'
Vue.use(Vuex)
const store= new Vuex.Store({
state:{
counter:1000
},
mutations,
getters,
actions,
modules:{
a:moduleA
},
})
export default store
-------------------------
actions.js文件下
export default {
test({state}){
}
}
----------------
getters.js文件下
export default {
filters: function (state) {
state.counter = 123
}
}
------------
mutation.js文件下
export default{
increment:state=>{
state.counter++
}
}
然后再去mian.js 的vue实列下挂载store
import store from './store/index'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
然后就可以去组件里面使用仓库了
<el-button type="primary" @click="supadd">发送{{$store.state.counter}}</el-button>
