XVUE vue的好同伙

什么是vuex

1. vuex vue项目中做数据统一管理的‘插件‘
2. 在vuex中存储的数据，每个组件都可以引用
3. 当vuex中的数据发生变化，引用该数据的组件会自动更新

vuex的作用，何种情况下可以使用

1. 如果一个数据，需要在多个组件重复使用，可以把数据存放在vuex的store中
3. 由于其更新局部会更新全局的特新，因此常用于用户数据，购物车数据

vuex的基础 你要搞懂这些单词先

单词	意思
actios	动作 属于异步
mutitons	改变：是修改state数据的唯一方式
state	状态，数据
getters	获取器
moudule	模块
commit	提交

state

存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则，例如状态对象必须是纯粹 (plain) 的

//数据，类似data
state: {
		cartNum: 10,
	},

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

mutitons和commit

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

//方法 是修改state数据的唯一方式 类似methods
mutations: {
		SET_CART_NUM(state, data) {
			state.cartNum = data;
		},
	},

<button @click="$store.commit('SET_CART_NUM',100)">变</button>
<button @click="$store.commit('SET_CART_NUM',$store.state.cartNum-1)">-</button>
<button @click="$store.commit('SET_CART_NUM',$store.state.cartNum+1)">+</button>

getters

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

<p>购物车总数:{{$store.getters.fee}}</p>

moudule

1. 应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
2. 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

actios和dispatch

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

//定义异步 网络延迟等方法
	//即让SET_CART_NUM等延迟生效
	actions: {
		getCartNum(context,data){
			setTimeout(()=>{
				context.commit('SET_CART_NUM',data)
			},600)
		}
	},

<button @click="$store.dispatch('getCartNum',100)">延迟变</button>
<button @click="$store.dispatch('getCartNum',$store.state.cartNum-1)">延迟-</button>
<button @click="$store.dispatch('getCartNum',$store.state.cartNum+1)">延迟+</button>