初识vuex

一、什么是vuex

1.在大型,特大型,vue项目中做数据统一管理的
2.在vuex 中存储的数据,每个组件都可以引用到vuex中的数据发生变化,引用该数据的组件会自动更新

二、什么数据可以存储在vuex

1.如果一个数据,需要在多个组件中重复使用,可以吧数据存放在vuex的store中
2.用户数据、购物车数据等

三、Store

安装完vuex就可以创建storel

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  		//定义vuex中的数据
		cartNum: 10,
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

创建完毕后可以通过 store.state 来获取状态对象，并通过 store.commit 方法触发状态变更：

{{$store.state.cartNum}}

四、mutations

定义修改数据的方法

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

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

$store.commit 是专门用来调用 store中的muations方法的

五、actions

定义异步，网络延迟等方法(只能调用mutations，不能直接修改state)

actions: {
		getCartNum(context,data){
			//可以执行网络请求，等待延迟
			setTimeout(()=>{
				//等待4秒后执行mutations的SET_CART_NUM方法
				context.commit('SET_CART_NUM',data)
				//修改了cartNum的值为参数data
			},4000)
		}
	},

<button @click="$store.dispatch('getCartNum',50)">延迟修改为50</button>
<button @click="$store.dispatch('getCartNum',30)">延迟修改为30</button>

$store.dispatch 是专门用来调用store中的actions方法

六、getters

从现有的数据计算出新的数据

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

<p>总价：{{$store.getters.fee}}</p>

在组件中调用$stroe.getters.fee