前言
从接触 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例子

https://github.com/ZHOUYUANN/vuex-todolist

UI界面是用的慕课网免费的课程 “ Vue+Webpack打造todo应用 ” ,其中代码也有使用到课程的代码。www.imooc.com/learn/935/