Vuex的基本用法

Posted 2020-10-16

    对于刚入门的小白来说，直接看官方的api是晦涩难懂的。要是去github找一些相关的例子，配合着官方api食用会有很好的效果，再就是多加练习了。

    Vuex是前端框架Vue的状态管理模式。有人可能问了，什么玩意？不懂。说白了其实就是一个插件而已，和vue-router一样让我们的Vue应用更加简洁、高效、易于管理。因为Vuex采用状态的集中管理，使得我门的spa应用在变得复杂的时候会更加好管理。关于一些前置概念诸如state、view、actions去官网搞搞就行了。最为重要的两点：

    1.通过提交mutation改变状态。

    2.store是动态的。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

　在这里state是Vue应用的状态仓库，mutations是状态改变的方法集合。等当我们执行：

store.commit(‘increment‘)

    这时就会触发mutations中的increment方法使得count+1，这与以往我们在methods中自己写方法对data进行操作的方式不同，整个Vue应用采用这种方法进行状态管理时会使应用更加简洁。用官方文档的描述就是“更明确地追踪到状态的变化”，同时由于store是动态的，这不影响我们对数据的引用。通过在根实例注册store我们可以通过：

computed: {
    count () {
      return this.$store.state.count
    }
  }

　　来返回数据，但是很多时候我们是需要用到state的一些派生数据例如对列表进行过滤呀，获取数组的长度呀。这时我们可以使用getter属性

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: ‘...‘, done: true },
      { id: 2, text: ‘...‘, done: false }
    ]
  },
  getters: {
    // 对state进行操作
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

    然后可以通过store.getters.doneTodos进行访问。也可以设定其他 getter 作为第二个参数进行混合计算。

    在学习框架的时候也不要忘记基础知识的掌握，还有程序员的基本功底：算法数据结构、计算机网络、计算机系统、编译原理。个人愚见，笑笑就好。