Vuex中state（状态）、mutations（更改状态） actions（异步操作）、getters(计算属性)、modules(模块)使用详解！

vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享的问题。

state 存放数据的

mutaitions 中不能去做异步的操作的。做数据修改的，目的是形成数据快照

数据快照是一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步

actions 中放异步的操作比如说axios请求。

getters(计算属性) 存放一些数据操作的更改

modules 模块化

组件调用action 执行一部操作将数据提交给mutaitions进行修改。

三种方法获取存储的数据

1.直接在需要调用的地方使用 $store.stare.属性名

2.在计算属性中使用

​
<template>
  <div>
   
   计算属性 count值为{{count}}
    <button @click="subs">-1</button>
  </div>
</template>

<script>

export default {

  },
  computed: {  
    count(){
        return this.$store.state.count
}
  }
}
</script>

<style></style>

​

3.在计算属性使用辅助函数-mapState 需要导入 这个辅助函数

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

<template>
  <div>
    当前最新的cout值为{{ $store.state.count }}
    辅助函数获取的count值为{{count}}
    <button @click="subs">-1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['sub']),
    subs() {
      this.sub()
    }
  },
  computed: {  再计算属性中使用 ...mapSate辅助函数展开  因为count 是一个数组
    ...mapState(['count'])
    count(){
        return this.$store.state.count
}
  }
}
</script>

<style></style>

如何调用 mutation中的方法？

 

 

 上图是已经定义好的 方法

一、通过this.$store.commit('属性名'，更改的值) 更改的值可以不带 根据在mutation中定义的方法

 二、通过辅助函数

 

 如何使用actions 修改异步操作呢？

已经定义好的方法 

 1.直接通过 this.$store.dispatch('方法名') 来调用 可以传参

2.通过辅助函数 导入 然后...map 映射方法名

import {mapActions} from 'vuex'

...mapActions(['方法名'])

  通过原始形式action进行异步操作
    <button @click="btyb">原始函数123</button>
    通过辅助函数形式形式action进行异步操作
    <button @click="getAsyncCount(333)">辅助函数方式1  333</button>
<button @click="btnss">辅助函数方式2333</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    btn() {
      this.$store.commit('add')
    },
    btns() {
      this.$store.commit('addd', 10)
    },
    btyb() {
      this.$store.dispatch('getAsyncCount')//不传参
this.$store.dispatch('getAsyncCount'，333)//传参
    },
    ...mapActions(['getAsyncCount'])
    btnss(){
        this.getAsyncCount()//不传参
    this.getAsyncCount(333)//传参
}
  }
}

vuex中的getters ？

getters 就是vuex中的计算属性。

 如何引用getters呢？

一种直接通过$store.getters.计算属性名

另一种通过..mapGetters(['计算属性名']) 来映射

 Vuex中的模块化 module？

如果把所有的状态都放在state对象中，当项目的状态越多，vuex会变得难以维护。

简单应用模块化？

先定义

 

取值方式1

通过getters （根级别的）方式进行取值

 首先现在 根getters中定义方法的属性名 并且配置获取的方法

 在组件中 引入 map辅助函数 通过...获取

模块化命名空间 ？

默认情况下，模块内部的actions，mutations.getter是注册全局命名空间的，这样使得多个模块能够对mutation 或 actions 做出相应，。

如何更新子模块的数据呢？

默认 这样数据的高密封性不够 可以使用下图方式调用 也可以使用辅助函数...map方式调用

 如何解决这种问题？

给子模块加一个锁 namespace:true  这样 上述的方式就获取不到数据了

加锁之后 如何调用呢？

一、直接通过 加路径的方式进行访问

 二、通过辅助函数的方式进行调用

 三、通过createNamespacedHelpers 辅助函数

先引入 然后创建 独立于module 模块的