vuex的入门学习

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex的中文文档 https://vuex.vuejs.org/zh-cn/intro.html
ES6：http://es6.ruanyifeng.com

说明：我们通信的目的往往就是在组件之间传递数据或组件的状态，进而更改状态。但可以看到如果我们通过最基本的方式来进行通信，一旦需要管理的状态多了，代码就会变得十分混乱。对所有状态的管理便会显得力不从心，尤其是多人合作的时候。

Vuex的核心：

1. state
2. mutations
3. getters
4. actions
5. modules

state：里面存放的是我们之前的data的
mutations：存放如何更改状态（事件，点击…）
actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。
module：就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。
getters:相当于computed 实时计算 ，过滤器

例子：
文件夹的目录如下

main.js文件中

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './store.js'    //import过来
Vue.use(Vuex)       //全局使用
Vue.config.productionTip = false
new Vue({
  store,    // 将store实例注入到根组件下的所有子组件中   子组件通过this.$store来方位store
  el: '#app',
  template: '<App/>',
  components: { App }
});

App.vue文件

<template>
  <div id="app">
       <h3>welcome vuex-demo</h3>
       <button @click='increment'>增加</button>
       <div>现在的数字为：{{count}}</div>
  </div>
</template>


<script>
import {mapActions , mapGetters } from 'vuex'
export default {
  name: 'app',
  methods:mapActions([   //使用 mapActions 辅助函数将组件的 methods 映射
    'increment'
    ]),
  computed:mapGetters([  //mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性：
    'count'
  ])
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// 存储状态值
var state = {
    count: 0   //类似于data属性
}

// 状态值的改变方法,操作状态值
// 提交mutations是更改Vuex状态的唯一方法
const mutations = {
    increment(state) { //处理状态数据的变化，methods方法
        state.count++;
    }
}
const actions = {  //处理你要干什么，异步请求，判断，流程控制
    increment:({commit})=>{   //ES6 解构（查看）  传递一个commit
        commit('increment');  //Action 提交的是 mutation，而不是直接变更状态。
    }
}

// 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数
const getters = {
    count(state){    //app.vue需要拿到这个值，这个我们得return出去
        return state.count;
    }
}
export default new Vuex.Store({   //这里要抛出去 不然外面不能使用
    state,
    actions,
    mutations,
    getters
})

这里还以实现减法 偶数增 奇数减等等操作的, 代码都在下面

后续还会更新的新的demo。。。。。