vuex的核心概念

什么是vuex ？

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

什么是状态管理模式 ？

这个状态自管理应用包含以下几个部分：

状态，驱动应用的数据源；

视图，以声明方式将状态映射到视图；

操作，响应在视图上的用户输入导致的状态变化。

什么数据可以存在vuex中

如果一个数据，需要在多个组件中重复使用，可以把数据存放在vue的store中用户数据购物车数据

State :单一状态

定义数据的地方

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState 辅助函数

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

可以用来定义数据

// 定义数据使用state
	state: {
		// 定义vuex中的数据
		cartNum: 10,
	},

<p>购物车{{$store.state.cartNum}}</p>

Getter

从 store 中的 state 中计算新的属性，例如对列表进行过滤并计数：

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）

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

Mutation

可以定义修改state 的状态也可也修改数据

mutations: {
		CART_NUM(state,data){
			state.cartNum=data;
		}
	},

<button @click="$store.commit('CART_NUM',100)">修改为100</button>
<button @click="$store.commit('CART_NUM',$store.state.cartNum+1)">修改+1</button>

Action

Action 类似于 mutation，不同在于：

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

actions: {
		getCART(context,data){
			setTimeout(()=>{
				context.commit('CART_NUM',data)
			},3000 )
		}
	},

Action 通过 store.dispatch 方法触发：

<button @click="$store.dispatch('getCART',33)">延迟</button>
<button @click="$store.dispatch('getCART',20)">延迟</button>

Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

购物车示例，涉及到调用异步 API 和分发多重 mutation：

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求
    // 然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

Module

Vuex 允许我们将 store 分割成模块（module）。

const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

下面是一些简单的应用效果

export default new Vuex.Store({
	// 定义数据使用state
	state: {
		// 定义vuex中的数据
		cartNum: 10,
	},
	getters: {
		fee:function(state){
			return state.cartNum*0.5
		}
	},
	mutations: {
		CART_NUM(state,data){
			state.cartNum=data;
		}
	},
	actions: {
		getCART(context,data){
			setTimeout(()=>{
				context.commit('CART_NUM',data)
			},3000 )
		}
	},
	modules: {}
})

<p>购物车{{$store.state.cartNum}}</p>
<p>佣金{{$store.getters.fee}}</p>
<button @click="$store.commit('CART_NUM',100)">修改为100</button>
<button @click="$store.commit('CART_NUM',$store.state.cartNum+1)">修改+1</button>
<button @click="$store.dispatch('getCART',33)">延迟</button>
<button @click="$store.dispatch('getCART',20)">延迟</button>