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 = falsenew 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。。。。。