初级快速理解入门 VUEX - 冬天里的向日葵

前言
从接触 vue 开始也有一段时间了，一直都是在学习状态，其中也看了视频的实战也看了 vue 的基础使用，但是对于 vue 的状态管理一直不是很理解，对里面的文档概念也很模糊，于是就 vuex 专门细看的官方文档，就自己做的和大部分典型的 TodoList 来做了一个 vuex 的入门，当然本人也算是初级新人，就我自己的角度来解释 vuex 的用法和理解，下面的例子是直接使用的 vuejs 和 vuexjs 来做处理，我认为这样做法的是理解代码最直接最简单的方法，如下有不得当的地方或错误欢迎下面指正。

写这篇文章和做的小例子也是为了自己的总结和笔记，第二也希望这篇文章能更好的帮助新人快速理解和入门 vuex 的简单运用。

在开始前，就我自己理解的和官网文档描述的来总结一段易懂的术语，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，就好比一个大型的图书馆

State 代表着整个图书馆内的每本书籍。
Getter 就相当于智能的电脑机器人，帮助你知道书籍的存放和有无变化，也会告诉你今天的书架上有什么东西。
Mutation 就相当于图书管理员，你取拿书籍，只能是告诉我就可以，我来帮你去拿到你想要的书籍，不需要外人来操作。
Action 就相当于你要去借书的动作，你去问图书管理员我要借什么书。
Module 就相当于有多个图书馆相互不影响里面的书籍。
最后再结合下面官网的一张图

通过前面的四步骤操作下来，那么你整个的就完成的对数据的提交和修改啦，从图中看出这些做完就形成了一套闭环，不需要你自己去关注 vuex 的底层实现操作，只需要把要提交的 “内容” （action 动作）给他，然后通过 “其他人” （mutations 动作）帮你去执行操作或修改数据，然后再自己取到你修改之后的内容，就完成闭环。

结合例子


<div id="app">
  <div>
    <input placeholder="接下来做什么?" v-model="message" >
    <span class="add-btn" @click="addTodo">+</span>
  </div>
  <div class="content">
    <div class="todo-item" 
      v-for="(list, index) in listGetters" 
      :key="index"
    >
      <label>{{list.text}}</label>
    </div>
  </div>
</div>
<script src="vue.js"></script>
<script src="vuex.js"></script>

var store = new Vuex.Store({
  state: {
    lists: []
  },
  mutations: { 
    // 第三步 管理员去拿你想要的书籍（至此完成 vuex 数据的修改）
    SET_MESSAGE_VALUE: function (state, newState) {
      state.lists.unshift(newState)
    }
  },
  actions: {
    setLists: function (context, list) {
      // 第二步（动作），借书的人来了，但是我不能去拿书，我让管理员（mutations）去拿
      context.commit('SET_MESSAGE_VALUE', list)
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  store: store,
  methods: {
    // 第一步，告诉图书管理员我要借书了
    this.$store.dispatch('setLists', {
      text: this.message
    })            
  }        
})

在完成了对数据的操作之后就是要用修改的数据，这两个是相互的，在vue 的方法中有个一个计算属性是可以观测数据的变化，那么在在vuex 也是有同样的属性getter，可以认为是 store 的计算属性。
上面代码已经完成了数据的添加，但是没有显示到页面的列表上，我在 todo-item 的上面的循环listGetters 是从 vuex 变更之后拿到的，所以说那要怎么做呢？

继续看下面代码


var store = new Vuex.Store({
  state: {
    lists: []
  },
  mutations: { 
    SET_MESSAGE_VALUE: function (state, newState) {
      state.lists.unshift(newState)
    }
  },
  actions: {
    setLists: function (context, list) {
      context.commit('SET_MESSAGE_VALUE', list)
    }
  },
  getter: {
    // 观测 state 数据的变化，然后返回
    listGetter: function (state) {
      return state.lists
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  store: store,
  methods: {
    // 可以使用 mapActions 函数
    // ...mapActions(['setLists'])
    // 调用方式 this.delLists( 参数 )
    // 参数可以是对象Object 或者其他
    this.$store.dispatch('setLists', {
      text: this.message
    })          
  },
  computed: {
    // 拿到 getter 里面的 listGetter 的数据
    // listGetters 就对应上面 todo-item 的循环数据对象
    // this.$store 相当于 store
    // 这里可以用 mapGetters 函数
    // ...mapGetters(['listGetter'])
    listGetters: function () {
      return store.getters.listGetter
    }    
  }     
})

通过上面代码分析下来是不是很清楚的知道每个环节所做的哪些事。

发送通知（dispatch）
找人去做（actions）
做好（mutations）
通知做好（getters）
可以用新的东西啦（vue 里的 computed）
当然里面有很多文档给出的简便 ES6 写法，但我写的简单一点也是为了更好的加深去理解。

好啦整片差不多就是这样了，下面的这个是我用vuex 做的简单todo例子