Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，核心就是 store（仓库）用来储存东西的。

核心属性

VueX 五个核心属性分别是 state、getter，mutations、actions、module

state: 定义 vuex 的数据地方

actions:定义异步延迟的方法

mutations: 唯一可以修改 state 数据的方法

getters:从现有 state 数据计算出新的数据， 类似于 vue 组件中的计算属性，对 state 数据进行计算（会被缓存）

modules:模块化管理 store（仓库），每个模块拥有自己的 state、mutation、action、getter

mutation中的方法用commit回调

actions中的方法用dispatch回调

state里的状态只能在mutation中更改

安装配置

下载依赖

npm i vuex -S

新建：src/stroe/index.js

// 初始化一个vuex的实例（数据仓库） 导出即可
import Vuex from 'vuex'
import Vue from 'vue'

// 使用安装
Vue.use(Vuex)

// 初始化
const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

// 导出
export default store

main.js 挂载

import store from '@/store'
new Vue({
  // 把store对象挂载到vue实例对象中，这样就可以在所有的组件中获取store中的数据了
  store,
  render: h => h(App)
}).$mount('#app')

使用方法

state

状态 state 用于存储所有组件的数据

state: {
	// 定义vuex中的数据
	cartNum: 10,
}
获取数据可以通过 $store.state

可以使用计算属性优化模板中获取数据的方式

state中的数据是自定义的，但是state属性名是固定的

计算属性不可以使用箭头函数（箭头函数本身是没有this的，实际上用的是父级函数中的this）

getters

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

//在组件中调用
$store.getters.fee
// 相当于state的计算属性（基于State处理成另外一份数据）
// getters的主要应用场景：模板中需要的数据和State中的数据不完全一样
// 需要基于state中的数据进行加工处理，形成一份新的的数据，给模板使用
getters: {
	// 从现有数据计算新的数据 每个商品佣金是0.5元
	// fee佣金会跟随cartNum变化而变化
	fee:function(state){
		return state.cartNum*0.5;
	}
},

在调用时，使用$store.getters.方法名，如$store.getters.powerCounter 即可

caleList () {
  // 注意：获取getters的值，不需要加括号（当属性使用）
  return this.$store.getters.getPartList
},

mutations

唯一可以改变 state 数据的工具 (提交 mutations)
先定义（mutations），再出发 this.$store.commit(‘mutation 的名称，参数’)
Vuex 规定必须通过 mutation 修改数据，不可以直接通过 store 修改状态数据
为什么要用 mutation 方式修改数据？统一管理数据，便于监控数据变化

mutations: {
	// 修改state数据必须在mutations中的方法
	// 方法名建议大写
	SET_CART_NUM(state,data){
		// 修改cartNum的值
		state.cartNum = data;
	}
},

<p>购物车数量:{{$store.state.cartNum}}</p>
<button @click="$store.commit('SET_CART_NUM',100)">修改为100</button>
<button @click="$store.commit('SET_CART_NUM',$store.state.cartNum+1)">修改+1</button><br>

actions

定义异步延迟的方法 this.$store.dispatch(‘getCartNum’, context,data)
使用异步操作 devtools 将不能很好地追踪,如果确实有异步操作，要使用 Action 替代 mutation 完成

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