(Vue-cli)七、Vuex（state&getters&mutations&actions）/ 详解单独创建modules模块 + 八、映射函数

七、Vuex

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

---

1.初始化Vuex

(1)安装

npm install vuex --save

(2)导入Vue,导入Vuex,使用Vuex(store文件下index.js)

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(在main.js)

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

(5)使用

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

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

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

② 修改数据

车辆名称：{{ $store.state.car.name }}
车辆价格：{{ $store.state.car.price }}
修改汽车信息
methods: {
  updateCar() {
    this.$store.commit("updateCar", { name: "奔驰", price: "60W" });
  }
}

---

2.store对象

(1) state选项：定义状态（状态就是数据）

可以在模板中通过$store.state.数据名直接使用。

 state: {
    carName:'玛莎拉蒂',
    carPrice:'100w',
    carAddress:'意大利',
  },

汽车名称：{{$store.state.carName}}
汽车价格：{{$store.state.carPrice}}
汽车产地：{{$store.state.carAddress}}

那么问题来了=>直接在模板中使用全局状态管理数据，表达式会写得很长...
所以通常，在计算属性computed里，对全局状态管理属性进行中转，
然后在模板中就可以使用数据名。如下：

computed:{
    carName(){
      return this.$store.state.carName
    },
    carPrice(){
      return this.$store.state.carPrice
    },
    carAddress(){
      return this.$store.state.carAddress
    },
    carInfo(){
      return this.$store.getters.carInfo
    }
  },

汽车名称--{{carName}}
汽车价格--{{carPrice}}
汽车产地--{{carAddress}}

(2) getters选项：定义计算属性

方法的第一个参数是状态对象state。
通过$store.getters.属性名使用计算属性。

getters:{
    carInfo(state){
      return `汽车名称：${state.carName}，汽车价格：${state.carPrice}，汽车产地:${state.carAddress}`
    }
},

{{ $store.getters.nameInfo }}
{{carInfo}}

(3) mutations选项：定义修改状态的方法

注意：这里的方法一般都是同步方法。
方法的第一个参数是状态对象，第二个参数是新值。
在需要使用的页面Home.vue，通过commit()方法，调用mutations里面的方法。

mutations:{
    updateCarName(state,val) {
      state.carName = val
    },
    updateCarPrice(state,val){
      state.carPrice = val
    },
    updateCarAddress(state,val){
      state.carAddress = val
    },
    loadPhones(state,val){
      state.phones = val
    },
},

methods: {
    updateCarPrice(){
      // 调用全局状态管理的方法，修改指定的状态数据
      // commit()方法，调用的是mutations里面定义的方法
      this.$store.commit('updateCarPrice','150w')
    },
    updateCarAddress(){
      // dispatch()方法，调用的是actions里面定义的方法
      this.$store.dispatch('updateCarAddress','data/address.json')
    }
  },

(4) actions选项：定义操作状态的方法

注意1：这里的方法可以写异步方法
注意2：这里的方法不要直接操作state状态，通过再调用mutations里面的方法去修改状态
所以，actions直接操作的是mutations。
方法的第一个参数是全局状态管理对象store，第二个参数是具体的值
在需要使用的页面，通过dispatch()方法，调用actions里面定义的方法。

 actions:{
    updateCarAddress(store,val){
      axios.get(val).then(({data})=>{
        // 方式一：这里可以直接修改状态，不建议
        // store.state.carAddress = data.address
        // 方式二：通过调用mutations里面的方法修改状态
        store.commit('updateCarAddress',data.address)
      })
    },
  },

(5) modules

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

(详解单独创建modules模块 见完整代码后)

---

store文件夹下index.js代码

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

// 创建一个全局状态管理对象并导出
export default new Vuex.Store({
  // state选项定义全局状态（数据）
  state: {
    carName:'玛莎拉蒂',
    carPrice:'100w',
    carAddress:'意大利',
    phones:[]
  },
  // getters选项定义计算属性
  getters:{
    // 方法的第一个参数，是全局状态
    carInfo(state){
      return `汽车名称：${state.carName}，汽车价格：${state.carPrice}，汽车产地:${state.carAddress}`
    },
    totalPrice(state){
      return state.phones.map(r=>r.price).reduce((a,b)=>a+b,0)
    }
  },
  // mutations选项定义操作状态的方法（这里的方法是同步方法）
  mutations:{
    // 方法的第一个参数是状态对象，第二个参数是具体的值
    updateCarName(state,val) {
      state.carName = val
    },
    updateCarPrice(state,val){
      state.carPrice = val
    },
    updateCarAddress(state,val){
      state.carAddress = val
    },
    // 加载手机信息的方法
    loadPhones(state,val){
      // 最终是在mutations里面修改状态
      state.phones = val
    },
    addPhone(state,val){
      // 最终是在mutations里面修改状态
      state.phones.push(val)
    }
  },
  // actions选项定义操作状态的方法
  // 注意1：这里的方法可以写异步方法
  // 注意2：这里的方法不要直接操作状态，通过再调用mutations里面的方法去修改状态
  actions:{
    // 方法的第一个参数是全局状态管理对象store，第二个参数是具体的值
    updateCarAddress(store,val){
      axios.get(val).then(({data})=>{
        // 方式一：这里可以直接修改状态，不建议
        // store.state.carAddress = data.address
        // 方式二：通过调用mutations里面的方法修改状态
        store.commit('updateCarAddress',data.address)
      })
    },
    // 加载手机信息的方法（异步方法）
    loadPhones(store,val){
      axios.get(val).then(({data})=>{
        store.commit('loadPhones',data)
      })
    }
  },
})

views下Home.vue代码

views下Phone.vue代码

---

modules

在store文件夹下创建modules文件夹，然后创建相关js文件，然后在js文件中创建好相关内容。
例如创建plane.js：

export default {
    // 默认情况下，action，mutation和getter是注册在全局命名空间的
    // 通过namespaced属性，设置为true，将action，mutation和getter全部注册到私有命名空间中
    namespaced:true,
    // 状态
    state:{
        planeName:'南航10086',
        planePrice:'1000w',
        planeAddress:'中国'
    }
}

此时plane的相关文件已经创建好，如何使用：在store文件夹下的index.js文件导入plane.js文件，并注册。

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

export default new Vuex.Store({
  state: {},
  getters:{},
  mutations:{},
  actions:{},
  // 模块
  modules:{
    plane
  }
})

① state
如何在DOM中使用modules中js文件的数据：如下，
注意：要从飞机模块中获取飞机的数据，
因此目前的方式是 this.$store.state.模块名称层.模块数据
此处方式只适用于state数据，
state数据是注册在私有空间，
getters，mutations，actions是注册在全局空间的，
这三个属性的用法是this.$store.getters.模块方法；this.$store.mutations.模块方法；this.$store.actions.模块方法

  

    
飞机信息
    
{{ planeName }}
  

export default {
  name: "Plane",
  computed: {
    planeName() {
      return this.$store.state.plane.planeName;
    },
  },
};

② getters
默认情况下getters，mutations，actions是注册在全局空间的，
通过namespaced:true，可以将getters，mutations，actions全部注册到私有空间中，
注意：当我们要从私有的模块中获取计算属性时，方式是 this.$store.getters['模块名/计算属性']

    // 获取计算属性
    planeInfo() {
      return this.$store.getters['plane/planeInfo'];
    },

③ mutations
在mutations中定义好一个同步方法后，如何在文档中调用该私密的方法，
使用如下的方法，同样是使用commit()，只不过参数发生了变化，变成了
注意：调用的是私有飞机模块里面的mutations定义的方法，
方法是this.$store.commit(' 模块名 / 方法名称'，参数)

    mutations:{
        updatePN(state,val){
            state.planeName = val
        }
    },

 methods: {
    updatePN() {
      this.$store.commit('plane/updatePN', '播音77777');
    },
    updatePP() {
      this.$store.dispatch('plane/updatePP', '20y');
    },
}

④ actions
同理，只是在调用时的传参的时候发生了变化，如下

// 异步方法
actions:{
    updatePP(store,val) {
         store.commit('updatePP',val)
    },
}

// 异步方法
actions:{
    updatePP(store,val) {
        setTimeout(() => {
            store.commit('updatePP',val)
        }, 500);
    },
}

---

八、映射函数

通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，便于操作vuex.store。
当组件中定义的计算属性跟全局状态管理store里面的数据名称相同时，可以使用映射函数，自动生成对应的计算属性，采用以下的方法：

(1) 导入映射函数

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

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

汽车名称：{{ carName }}
汽车价格：{{ carPrice }}
汽车产地：{{ carAddress }}
{{ carInfo }}

飞机名称：{{ planeName }}
飞机价格：{{ planePrice }}
飞机产地：{{ planeAddress }}
{{ planeInfo }}

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里面的方法，函数的第一个参数设置为模块的名称。

修改汽车名称
修改汽车价格
修改汽车产地

修改飞机名称
修改飞机价格

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

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