介绍：

一个公共数据管理工具。可以把一些共享的数据保存到vuex中，方便整个程序中任何组件直接获取或修改。

作用：

为了保存组件之间需要共享的数据。

vuex&props&data之间的区别：

• vuex 全局数据，一般存放组件之间共享的数据
• props 父子之间存储的数据
• data 组件私有数据

替代：

vuex 可以使用 localStorage 或者 sessionStorage 替代，在小项目中，能不使用 vuex 就不使用，没有必要。

⭐️ 基本使用

1. 运行 npm install vuex -S
2. src目录下面新建一个vuex的文件夹，vuex 文件夹里面新建一个store.js
// 在创建的store.js 中引入 vue、vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 定义数据
var state = {
  count:1
}

// 包装数据（可以理解为store的计算属性）
var getters = { // 只负责对外提供数据，不负责修改。如果想要修改，请使用 mutation
  optCount: function(state) {
    return '当前累加值count是：' + state.count
  }
}

// 定义方法（改变state中的数据）
var mutations = {
  // 参数1：state状态 参数2：通过commit提交过来的参数，只能是一个，多个则使用对象形式{a:1,b:2}
  incCount(state, a){
    state.count += a
  }
}

// 异步请求
var actions = {
  //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
  increment(context) {
    let a = context.state.a
    context.commit('incCount')
  },
  checkout({ commit, state }, payload) {
    commit('increment')
  }
}

// 暴露
const store = new Vuex.Store({
  state,
  mutations
})
export default store

3. 组建里面使用vuex
// 引入 store
import store from '../vuex/store.js';
// 获取vuex数据
this.$store.state.count
// or
this.$store.getters.optCount
// 更新vuex数据
this.$store.commit('incCount', 2);
// 异步更新
this.$store.dispatch('checkout', payload);

注意点

• state的数据：不能直接修改。需通过 mutations 来改变
• state的获取：this.$store.state.***
• state的修改：this.$store.commit("方法名", 唯一的参数);
• state的包装：当需要将数据做包装再对外提供的时候，使用 getters
  • this.$store.getters.***

localStorage

存储：

localStorage.setItem('car', JSON.stringify(state.car));