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

作者：羊村懒王 | 2024-03-17 16:03:15

踩

vuex state

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)//传参
}
  }
}