一、初始化Vuex

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果一份数据需要在多个组件中使用，组件间传值又比较复杂，就可以使用vuex托管数据。

1、安装

npm install vuex --save

2、导入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3、创建状态管理对象 store

state选项：定义状态（状态就是数据）。
mutations选项：定义修改状态的方法（注意：这里面只能定义同步方法）。

export default new Vuex.Store({
  // 定义全局状态（状态就是数据）
  state:{
    car:{
        name:'奔驰',
        price:'40W'
    }
  },
  // 定义修改状态的方法
  mutations:{
    //该方法，修改汽车信息
    updateCar(state,val){
        state.car = val
    }
  }
})

4、注册给Vue

// 导入当前项目中的全局状态管理对象
import store from './store'
new Vue({
  // 在vue实例中使用全局状态管理对象
  store,
  render: h => h(App)
}).$mount('#app')

5、简单使用

$store：返回的是当前项目中的全局状态对象。
commit()方法：用于执行指定的mutations里面的方法。

（1）获取数据

在组件中，直接通过$store.state就可以获取到全局状态对象管理的状态数据，直接渲染到页面。

<div>车辆名称：{{ $store.state.car.name }}</div>
<div>车辆价格：{{ $store.state.car.price }}</div>

（2）修改数据

<div>车辆名称：{{ $store.state.car.name }}</div>
<div>车辆价格：{{ $store.state.car.price }}</div>
<button @click="updateCar">修改汽车信息</button>

methods: {
  updateCar() {
    this.$store.commit("updateCar", { name: "奔驰", price: "60W" });
  }
}

二、核心概念

1、state

state选项：定义状态（状态就是数据）。

  state: {
    name:'张三'
  }

通过$store.state.数据名使用。

<div>姓名：{{ $store.state.name }}</div>

2、getters

getters选项：定义计算属性。方法的参数是状态对象。

  getters:{
    // 方法的第一个参数是全局状态
    nameInfo(state){
      return `我的名字叫${state.name}`
    }
  }

通过$store.getters.属性名使用计算属性。

<div>{{ $store.getters.nameInfo }}</div>

3、mutations

mutations选项：定义修改状态的方法（注意：这里的方法一般都是同步方法）。方法的第一个参数是状态对象，第二个参数是新值。

  mutations:{
    // 修改姓名
    updateName(state,val){
      state.name = val
    }
  },

通过commit()方法，调用mutations里面的方法。

this.$store.commit("updateName", '李四');

4、actions

actions选项：定义操作状态的方法（这里的方法可以定义异步方法）。
注意：actions里的方法最好不要直接操作state状态，而是通过调用mutations里面的方法去修改状态。所以，actions直接操作的是mutations。

  state: {
    carAddress:'意大利'
  },
  mutations:{
    //修改汽车的产地
    updateCarAddress(state,val){
      state.carAddress = val
    }
  },
  actions:{
    //修改汽车的产地
    //方法的第一个参数是全局状态管理对象，第二个参数是具体的值
    updateCarAddress(store,val){
      axios.get(val).then(({data})=>{
        // 方式一：这里可以直接修改状态
        // store.state.carAddress = data.address
        // 方式二：通过调用mutations里面的方法修改状态
        store.commit('updateCarAddress',data.address)
      })
    }
  }

通过dispatch()方法，调用actions里面定义的方法。

this.$store.dispatch('updateCarAddress','data/address.json')

5、modules

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

（1）定义模块

namespaced属性：默认情况下，action、mutation 和 getter 是注册在全局命名空间的。通过设置namespaced属性为true，将action、mutation 和 getter全部注册到私有命名空间中。

export default {
    namespaced:true,
    // 状态
    state:{
        planeName:'空客404',
        planePrice:'10Y',
        planeAddress:'中国'
    },
    // 计算属性
    getters:{
        planeInfo(state){
            return `飞机名称：${state.planeName}，飞机价格：${state.planePrice}，飞机产地：${state.planeAddress}`
        }
    },
    // 同步方法
    mutations:{
        updatePlaneName(state,val){
            state.planeName = val
        },
        updatePlanePrice(state,val){
            state.planePrice = val
        }
    },
    // 异步方法
    actions:{
        updatePlanePrice(store,val){
            setTimeout(() => {
                store.commit('updatePlanePrice',val)
            }, 500);
        }
    }
}

（2）在全局状态管理对象中导入模块

// 导入飞机模块
import plane from './modules/plane.js'

// 创建一个全局状态管理对象并导出
export default new Vuex.Store({
  // 模块
  modules:{
    // 飞机模块
    plane
  }
})

（3）使用模块

① 获取模块中的state状态

要从私有模块中获取数据，方式是：$store.state.模块名称.模块的数据 。

<div>飞机名称：{{ planeName }}</div>

planeName() {
  return this.$store.state.plane.planeName;
}

② 获取模块中的getters计算属性

要从私有模块中获取计算属性，方式是：$store.getters['模块名/计算属性']。

<div>{{planeInfo}}</div>

planeInfo(){
    return this.$store.getters['plane/planeInfo']
}

③ 调用模块中的mutations定义的方法

调用私有模块里面的mutations定义的方法，方式是：$store.commit('模块名/方法名',新值)。

<button @click="updatePlaneName">修改飞机名称</button>

updatePlaneName(){
  this.$store.commit('plane/updatePlaneName','波音747')
}

④ 调用模块中的actions定义的方法

调用私有模块里面的actions定义的方法，方式是：$store.dispatch('模块名/方法名',新值)。

<button @click="updatePlanePrice">修改飞机价格</button>

updatePlanePrice(){
  this.$store.dispatch('plane/updatePlanePrice','20Y')
}

三、Vuex使用

1、计算属性中转

直接在模板中使用全局状态管理数据，表达式会写的很长。所以可以使用计算属性。

  // getters选项定义计算属性
  getters:{
    carInfo(state){
      return `汽车名称：${state.carName}，汽车价格：${state.carPrice}，汽车产地：${state.carAddress}`
    }
  }

 <!-- 直接在模板中使用全局状态里面的计算属性 -->
 <div>{{$store.getters.carInfo}}</div>
 <div>{{carInfo}}</div>

  //计算属性
  computed:{
    // 汽车信息
    carInfo(){
      // 返回全局状态管理里面的计算属性
      return this.$store.getters.carInfo
    }
  }

2、映射函数

通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，便于操作vuex.store。

（1）导入映射函数

// 从vuex中，导入映射函数
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

（2）使用映射函数生成计算属性

如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，就可以使用mapState映射函数，自动生成页面中的计算属性。
如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，就可以使用mapGetters映射函数，自动生成页面中的计算属性。
注意：如果要映射模块里面的state/getters，函数的第一个参数设置为模块的名称。

<div>汽车名称：{{ carName }}</div>
<div>汽车价格：{{ carPrice }}</div>
<div>汽车产地：{{ carAddress }}</div>
<div>{{ carInfo }}</div>
<hr/>
<div>飞机名称：{{ planeName }}</div>
<div>飞机价格：{{ planePrice }}</div>
<div>飞机产地：{{ planeAddress }}</div>
<div>{{ planeInfo }}</div>

computed: {
  // mapState映射state
  ...mapState(["carName", "carPrice", "carAddress"]),
  // mapGetters映射getters
  ...mapGetters(["carInfo"]),

  // 映射私有模块里面的数据
  ...mapState('plane',['planeName','planePrice','planeAddress']),
  ...mapGetters('plane',['planeInfo'])
}

（3）使用映射函数生成方法

如果定义的方法名跟全局管理对象中mutations里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用mapMutations映射函数生成方法。
如果定义的方法名跟全局管理对象中actions里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用mapActions映射函数生成方法。
注意：如果要映射私有模块中mutations/actions里面的方法，函数的第一个参数设置为模块的名称。

<button @click="updateCarName('宾利')">修改汽车名称</button>
<button @click="updateCarPrice('300W')">修改汽车价格</button>
<button @click="updateCarAddress('data/address.json')">修改汽车产地</button>
<hr/>
<button @click="updatePlaneName('波音747')">修改飞机名称</button>
<button @click="updatePlanePrice('20Y')">修改飞机价格</button>

methods: {
  // 映射全局管理对象中mutations里面的方法
  ...mapMutations(["updateCarName", "updateCarPrice"]),
  // 映射全局管理对象中actions里面的方法
  ...mapActions(["updateCarAddress"]),

  // 映射私有模块里面的方法
  ...mapMutations('plane',['updatePlaneName']),
  ...mapActions('plane',['updatePlanePrice'])
}

3、购物车模块

import axios from "axios";
export default {
  namespaced: true,
  state: {
    //商品数组
    goodses: [],
  },
  getters: {
    //总价
    totalPrice(state) {
      return state.goodses.filter((r) => r.ck).map((r) => r.price * r.count).reduce((a, b) => a + b, 0);
    },
    // 是否全选
    isCkAll(state) {
      return state.goodses.length>0 & state.goodses.every((r) => r.ck);
    },
  },
  mutations: {
    // 加载数据的同步方法
    loadGoodses(state, val) {
      state.goodses = val;
    },
    // 设置所有商品的状态
    ckAll(state, val) {
      state.goodses.forEach((r) => {
        r.ck = val;
      });
    },
    // 根据id删除商品
    delGoodsById(state, id) {
      let index = state.goodses.findIndex((r) => r.id == id);
      state.goodses.splice(index, 1);
    },
  },
  actions: {
    // 加载数据的异步方法
    loadGoodses(store, val) {
      axios.get(val).then(({ data }) => {
        store.commit("loadGoodses", data);
      });
    },
    // 设置所有商品的状态
    ckAll(store, val) {
      store.commit("ckAll", val);
    },
    // 根据id删除商品
    delGoodsById(store, id) {
        store.commit("delGoodsById", id);
    },
  },
};

<template>
  <div class="shopcart">
    <h4>购物车</h4>
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="isCkAll" />
          </th>
          <th>名称</th>
          <th>图片</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in goodses" :key="item.id">
          <td>
            <input type="checkbox" v-model="item.ck" />
          </td>
          <td>{{ item.name }}</td>
          <td>
            <img :src="item.img" />
          </td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="item.count--" :disabled="item.count === 1">
              -
            </button>
            <input type="text" v-model="item.count" />
            <button @click="item.count++" :disabled="item.count === 10">
              +
            </button>
          </td>
          <td>{{ item.price * item.count }}</td>
          <td>
            <button @click="delGoodsById(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="7">
            <span>总价：</span>
            <span>{{ totalPrice }}</span>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "Shopcart",
  computed: {
    ...mapState("shopcart", ["goodses"]),
    ...mapGetters("shopcart", ["totalPrice"]),
    // 定义可以修改的计算属性
    isCkAll: {
      set(val) {
        this.ckAll(val);
      },
      get() {
        return this.$store.getters["shopcart/isCkAll"];
      },
    },
  },
  methods: {
    // 映射actions对应的方法
    ...mapActions("shopcart", ["ckAll", "delGoodsById"]),
  },
  // 页面挂载完成
  mounted() {
    this.$store.dispatch("shopcart/loadGoodses", "data/shopcart.json");
  },
};
</script>

购物车效果图