Vue学习笔记：vuex基础

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装vuex

cnpm i vuex -S

在main.js中导入vuex

import Vue from 'vue'

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

Promis

Vuex 依赖 Promise。需要安装一个 polyfill 的库，例如 es6-promise 。

或者通过 CDN 将其引入：

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

在main.js中导入：

import 'es6-promise/auto'

开始

Store

每一个 Vuex 应用的核心就是 store（仓库）。

const store = new Vuex.Store({
  state: {// 相当于data
    count: 0
  },
  mutations: {// this.$store.commit('increment', '按需传递唯一的参数')
    increment (state) {
      state.count++
    }
  },
  getters: {// this.$store.getters.doneTodos  当于filters
 	 doneTodos: state => {
     	return state.count
    }
  },
  actions: {// store.dispatch('increment')
    increment (context) {
      context.commit('increment')
    }
  }
})

getters

获取 state 中数据，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

mutations

mutation 必须是同步函数。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation， state 作为第一个参数。最好提前在 store 中初始化好所有所需属性。

actions

类似于 mutation，不同: Action 提交的是 mutation，而不是直接变更状态。可异步操作。