vuex的状态管理

一、vuex简介

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

二、核心概念

store:vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。
store创建

 new Vuex.Store({
 
})

在store中又包含了5个对象

1. state – 存放状态
2. getters – state的计算属性
3. mutations – 更改状态的逻辑，同步操作
4. actions – 提交mutation，异步操作
5. mudules – 将store模块化

完整结构（也可以每个单独来写）

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

三、相关案例

单个模块时：当点击增加时 执行increment事件，到action中提交（函数）到mutations将state传递进去
创建store.js仓库，并且引入vue与vuex,

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = {
    count:1
}

// 监听 state数据的更新
const mutations = {
    // 才是具体方法的实现
    increment(state) { 
        state.count++
    },
    decrement(state) { 
        state.count--
    }
}

const actions = {
    increment: ({ commit }) => { 
        commit('increment')
    },
    decrement: ({ commit }) => { 
        commit('decrement')
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions
})

在主入口引入store.js文件 并将其挂载到实例中

 import store from './store'
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

```创建vuex组件 

```handlebars
<template>
  <div>
      <h1>vuex组件</h1>
      <!-- 展示 vuex中的数据  state -->
      {{$store.state.count}}
   <button type="button" @click='increment'>增加</button>
   <button type="button" @click='decrement'>减少</button>
  </div>
</template>

<script>
//当点击增加时 执行increment事件，到action中提交（函数）到mutations将state传递进去


import {mapActions} from 'vuex'
export default {
methods:mapActions([  //mapActions分发方法 到仓库中的action
    'increment',
    'decrement'
])
}
</script>

如果挂载//在主入口文件中只能挂载一个store仓库，挂载多个仓库时 先封装在一个index.js中，然后在index.js中通过modules暴露最终的store仓库多个仓库时：

export default new Vuex.Store({
     modules:{
         count,
         money
     }
})