Vuex基础

   1.vuex是什么  

        Vuex 是 Vue .js 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中式存储，其规则确保状态只能以可预测的方式进行更改。

        通俗来说：在大型，特大型，vue项目中做数据统一管理的，在vuex中存储的数据，每个组件都可以引用到vuex中的数据发生变化，引用该数据的组件会自动更新，什么数据可以存储在vuex里面。

2.vuex的安装

• 命令窗口安装

npm install vuex --save

• 在src下创建 store 文件夹 新建一个index.js文件，并为其导入vuex

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

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		catnum:10,
	},
	getters: {},
	mutations: {
		// 修改state中数据
		// 调用：$stort.commit
		SET_CART_NUM:function(state,data){
			state.catnum= data;
		}
	},
	actions: {
		// 调用：$stort.dispatch
		// 定义异步
		// 只能调用mutations，不能直接修改
		getCatNum(con,data){
			setTimeout(()=>{
				con.commit('SET_CART_NUM',data)  //不能直接修改 ,所以调用mutations里定义的方法
			},4000)
		}
	},
	modules: {}
})

•  state:定义vuex的数据地方, 在组件访问数据的数据：$store.state.catnum
• mutations：定义修改数据方法,在组件中调用mutations的方法;$store.commit('方法名', 值)

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

•  actions：定义异步，延迟的方法，只能调用mutations,不能直接修改state

  actions: {
    //定义异步，网络延迟等方法
    //只能调用mutations,不能直接修改state
    getCartNum(context,data){
        //可以执行网络请求，等待延迟
      setTimeout(()=>{
        //等待4秒后执行mutations的SET_CART_NUM方法
        context.commit("SET_CART_NUM",data)
        //修改了cartNum的值为1
      },4000)
    }
  },

在组件中调用：$store.dispatch('getCatNum',33)

<button @click="$store.dispatch('getCartNum', 33)">延迟改变</button>

• getters：从现有state数据计算出新的数据

  getters: {
    //从现有数据计算新的数据 每个商品佣金是0.5元
    //fee佣金会跟随cartNum变化而变化
    fee:function(state){
      return state.cartNum*0.5
    }
  },

 在组件中调用：@store.getters.fee

单词

1. actions 动作：异步方法
2. mutations改变：是修改state数据的唯一方式
3. state：状态，数据
4. getters 获取器
5. moudule 模块
6. commit 提交
7. dispatch 触发