(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就可以获取到全局状态对象管理的状态数据，直接渲染到页面。

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

② 修改数据

<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" });
  }
}

2.store对象

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

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

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

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

那么问题来了=>直接在模板中使用全局状态管理数据，表达式会写得很长...
所以通常，在计算属性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
    }
  },

<div>汽车名称--{{carName}}</div>
<div>汽车价格--{{carPrice}}</div>
<div>汽车产地--{{carAddress}}</div>

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

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

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

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

(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代码

<template>
  <div class="home">
    <h4>汽车信息</h4>
      <!-- 直接在模板中使用全局状态管理数据：表达式会写得很长 -->
      <div>汽车名称：{{$store.state.carName}}</div>
      <div>汽车价格：{{$store.state.carPrice}}</div>
      <div>汽车产地：{{$store.state.carAddress}}</div>
      <hr>
      <div>汽车名称--{{carName}}</div>
      <div>汽车价格--{{carPrice}}</div>
      <div>汽车产地--{{carAddress}}</div>
      <hr>
      <!-- 直接在模板中使用全局状态管理里面的计算属性 -->
      <div>{{$store.getters.carInfo}}</div>
      <div>{{carInfo}}</div>
      <hr>
      <!-- 直接在模板中调用全局状态管理里面定义的方法，表达式很长 -->
      <button @click="$store.commit('updateCarName','保时捷')">修改汽车名称</button>
      <button @click="updateCarPrice">修改汽车价格</button>
      <button @click="updateCarAddress">修改汽车产地</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  // 计算属性
  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
    }
  },
  methods: {
    updateCarPrice(){
      // 调用全局状态管理的方法，修改指定的状态数据
      // commit()方法，调用的是mutations里面定义的方法
      this.$store.commit('updateCarPrice','150w')
    },
    updateCarAddress(){
      // dispatch()方法，调用的是actions里面定义的方法
      this.$store.dispatch('updateCarAddress','data/address.json')
    }
  },
}
</script>

<style lang="scss" scoped>
.home{
  border: 1px solid #ccc;
  padding: 5px;
}
</style>

views下Phone.vue代码

<template>
  <div class="phone">
      <h4>手机信息</h4>
      <ul>
          <li v-for="(item,index) in phones" :key="index">{{item.name}}--{{item.price}}</li>
          <li>总价{{totalPrice}}</li>
      </ul>
      <div>
          <span>手机名称：</span>
          <input type="text" v-model="phoneName">
          <span>手机价格：</span>
          <input type="text" v-model.number="phonePrice">
          <button @click="addPhone">添加手机信息</button>
      </div>
  </div>
</template>
<script>
export default {
  name: "Phone",
  data() {
      return {
          phoneName:'',
          phonePrice:0
      }
  },
  computed:{
    //   获取所有的手机信息
      phones(){
          return this.$store.state.phones
      },
      totalPrice(){
          return this.$store.getters.totalPrice
      }
  },
  // 当这个页面加载完成时
  created() {
      // 加载手机信息
      // dispatch()方法，调用的是actions里面定义的方法
      this.$store.dispatch('loadPhones','data/phones.json')
  },
  methods: {
      addPhone(){
          let phone = {
              name:this.phoneName,
              price:this.phonePrice
          }
          // commit()方法，调用的是mutations里面定义的方法
          this.$store.commit('addPhone',phone)
      }
  },
};
</script>
<style scoped lang='scss'>
.phone{
    border: 1px solid #ccc;
    padding: 5px;
}
</style>

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.模块方法

  <div class="plane">
    <h4>飞机信息</h4>
    <div>{{ planeName }}</div>
  </div>

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

<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'])
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,001评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,210评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,874评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,001评论 1赞 291
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,022评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,005评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,929评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,742评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,193评论 1赞 309
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1赞 346
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,305评论 5赞 342
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,911评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2赞 352