状态(数据)管理vuex

        每个组件内部的数据存放在data中，供组件内部使用。如果，vue组件之间数据共享怎么办？即A组件使用B组件里的数据？

传统的处理方案：父子组件传值、平行（兄弟）组件跳转、利用url、路由传值等。以上这些方式存在很多缺点：

• 数据传递复杂，容易出错；
• 浪费内存

一.作用

• 能够保存全局数据，供整个应用使用；
• 保存的数据是响应式的；
• 保存的数据可以跟踪状态的变化。

二.核心对象（vueX.store）

        核心对象中的配置项：

state：数据仓库，存储所有的共享数据，相当于vue组件里的data；

getters：在state的基础上派生的数据，相当于vue组件中的computed；

mutations：修改state的数据时，用mutation这与跟踪状态有关系；

actions：解决mutation里只能有同步代码的问题，action中可以哟异步代码；

modules：模块化。

三.使用步骤

        ①安装

npm安装vueX：  npm install vuex –save

        ②创建vueX.store

//在项目的根目录下，创建store/index.js

import Vue  from 'vue'
//引入vueX
import Vuex from 'vuex'
//把vueX安装到Vue里
Vue.use(Vuex)

export default new Vuex.Store({
    state:{
          id: '01'
    },
    getters:{},
    mutations:{},
    actions:{}
})

        ③将vueX.store对象植入到vue的根属性

./src/main.js

import store from './store'

new Vue({
  	el: '#app',
  	store,//把store对象植入到vue的根属性，在vue组件里就可以使用 this.$store拿到vueX.store对象
    router
  		……………………	
})

        ④组件中获取值

//模板里：
$store.state.id
//脚本里
this.$store.state.id

         ⑤组件中保存数据：使用mutation修改数据。

四.Action和mutation的区别

• 从代码的角度上

        action是来提交mutation；

• 从用途（意义）上

        actions和mutation是为了能用devtools追踪状态变化，vueX真正限制的只有mutation必须是同步，actions可以包含任何异步操作。

五.数据流向

 eg：