vuex 初识

vueX 状态管理

vuex的安装：
    npm install vuex --save
    必须显式地通过 Vue.use() 来安装 Vuex：
        import Vue from \'vue\'
        import Vuex from \'vuex\'
        Vue.use(Vuex)
        Vuex 依赖 Promise 。支持的浏览器并没有实现 Promise (比如 IE)，可以使用一个 polyfill 的库
            npm install es6-promise --save # npm

状态自管理包含三个部分：
    1.state，驱动应用的数据源；
    2.view，以声明方式将 state 映射到视图；
    3.actions，响应在 view 上的用户输入导致的状态变化。
    
存在的问题：
    多个视图依赖于同一状态。
    来自不同视图的行为需要变更同一状态。
    
解决办法：
    共享状态抽取，搭建全局单例管理模式
    
    store仓库：包含着应用中大部分的状态 (state)
        1.Vuex 的状态存储是响应式的。
        2.不能直接改变 store 中的状态，只能通过commit提交mutation进行修改

sample:
    在src目录下创建store目录：
    创建统一对外配置文件
    在store目录下创建modules目录存放各个store的具体js单例数据仓库
        举例： modules下js文件count.js
        举例： 统一对外配置文件 index.js
        举例： 调用页面 => index.vue

count.js

// module store => count
const count = {
  state: {
    count: 1
  },
  mutations: {
    countNum: (state) => {
      state.count++
    }
  }
}

export default count

index.js

import Vue from \'vue\'
import Vuex from \'vuex\'
import count from \'./modules/count.js\'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    count
  }
})

export default store

index.vue

<template>
  <div>
    <input type=\"button\" @click=\"show\" value=\"show\"/>
  </div>
</template>
< >
export default {
  data () {
    return {
    }
  },
  methods: {
    show () {
      this.$store.commit(\'countNum\')
      alert(\'count:\' + this.$store.state.count.count)
    }
  }
}
</ >
<style lang=\"less\" scoped>
</style>

到此，初步使用是没啥子问题了。