【博学谷学习记录】超强总结,用心分享丨前端开发:vuex核心概念(上)

vuex核心概念

一、state 状态

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。
打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。

index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)
// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别在于 data 是组件自己的数据, 而 state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})
// 导出仓库
export default store

如何在组件中获取count?
1.插值表达式 =》 {{ $store.state.count }}
2.mapState 映射计算属性 =》 {{ count }}

1.原始形式- 插值表达式

组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下

App.vue

<h1>state的数据 - {{ $store.state.count }}</h1>

计算属性 - 将state属性定义在计算属性中

App.vue

<template>
  <div>
    <!-- 插值表达式获取count -->
    <h1>state的数据 - {{ count }}</h1>
  </div>
</template>

<script>
export default{
// 把state中数据，定义在组件内的计算属性中
computed: {
    count () {
      return this.$store.state.count
    }
  }
}
</script>

但是每次, 都这样一个个的提供计算属性, 太麻烦了, 所以我们需要辅助函数 mapState 帮我们简化语法

2.辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法

App.vue

<template>
  <div>
    <!-- 插值表达式获取count -->
    <h1>state的数据 - {{ count }}</h1>
  </div>
</template>

<script>
// 第一步：导入mapState (mapState是vuex中的一个函数)
import { mapState } from 'vuex'
export default{
  // 第三步：利用展开运算符将导出的状态映射给计算属性
 computed: {
  // 第二步：采用数组形式引入state属性
    ...mapState(['count'])
  }
  // 上面代码的最终得到的是 类似于
  // count () {
  //     return this.$store.state.count
  // }
}
</script>

二、核心概念 - mutations

1.基本使用

通过 strict: true 可以开启严格模式
state数据的修改只能通过mutations，并且mutations必须是同步的

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别在于 data 是组件自己的数据, 而 state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  },
  // 定义mutations
  mutations: {
     
  }
})

2.格式说明

mutations是一个对象，对象中存放修改state的方法

// 定义mutations
  mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state) {
      state.count += 1
    }
  }

组件中提交 mutations
this.$store.commit(‘addCount’)
解决问题: 两个子组件, 添加操作 add, addN 实现
App.vue

<template>
  <div>
    <!-- 插值表达式获取count -->
    <h1>state的数据 - {{ count }}</h1>
    <button @click="addcount">改变count数值</button>
  </div>
</template>

<script>
// 第一步：导入mapState (mapState是vuex中的一个函数)
import { mapState } from 'vuex'
export default{
  // 第三步：利用展开运算符将导出的状态映射给计算属性
 computed: {
  // 第二步：采用数组形式引入state属性
    ...mapState(['count'])
      // 上面代码的最终得到的是 类似于
      // count () {
      //     return this.$store.state.count
      // }
  },
  methods:{
    addcount(){
      this.$store.commit('addCount')
    }
  }
}
</script>

3.带参数的 mutation

需求: 父组件也希望能改到数据
提交 mutation 是可以传递参数的 this.$store.commit(‘xxx’, 参数)
1.提供mutation函数

mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state,num) {
      state.count += num
    }
  }

2.注册事件

<button @click="addcount(5)">改变count数值</button>

3.提交mutation

addcount(num){
      this.$store.commit('addCount',num)
    }

小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

4.辅助函数 - mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

<template>
  <div>
    <!-- 插值表达式获取count -->
    <h1>state的数据 - {{ count }}</h1>
    <button @click="addCount(5)">改变count数值</button>
  </div>
</template>

<script>
// 第一步：导入mapState (mapState是vuex中的一个函数)
import { mapState } from 'vuex'
import  { mapMutations } from 'vuex'

export default{
  // 第三步：利用展开运算符将导出的状态映射给计算属性
 computed: {
  // 第二步：采用数组形式引入state属性
    ...mapState(['count'])
      // 上面代码的最终得到的是 类似于
      // count () {
      //     return this.$store.state.count
      // }
  },
  methods: {
    ...mapMutations(['addCount'])
    /*上面代码的含义是将mutations的方法导入了methods中，等价于
methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }
此时，就可以直接通过this.addCount调用了
}*/
}
</script>

但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中