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>
<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    show () {
      this.$store.commit('countNum')
      alert('count:' + this.$store.state.count.count)
    }
  }
}
</script>
<style lang="less" scoped>
</style>

需要注意的是在main.js中需要在app中进行注入：

import App from './App'
import router from './router'
import axios from 'axios'
import Vue from 'vue'
import store from './store'       // 这里引入

Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,                  // 这里注入
  components: { App },
  template: '<App/>'
})

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