Vuex 简介

Vuex 是什么

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

什么数据可以存储在vuex里面

如果一个数据复用次数多，则可以把数据存放在vuex的store
用户数据，
购物车数据

vuex核心概念

state

Vuex 使用单一状态树
state是定义vuex的数据地方

state:{
	cartNum:0
}

在组件中访问数据

$store.state.cartNum

mutations

定义修改数据的方法
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。

 mutations: {
    SET_CART_NUM:function(state, data) {
      state.cartNum = data
    }
  },

在组件中访问mutations的方法

$store.commit('SET_CART_NUM',data)

actions

定义异步，延迟的方法
Action 类似于 mutation，
不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

actions:{
	getCartNum(context,data) {
      setTimeout(() => {
        context.commit("SET_CART_NUM",data)
      }, 4000); 
    }
}

在组件中调用

$store.dispatch('getCartNum',55)

getters

从现有的state数据计算出新的数据
Getter 接受 state 作为其第一个参数

getters:{
	fee:function(state){
		return state.cartNum*0.5
	}
}

在组件中调用

$store.getters.fee