vuex补充：state存储数据，mutation修改数据（传参），action处理异步（传参）,getters

最新推荐文章于 2024-06-05 00:45:00 发布
最新推荐文章于 2024-06-05 00:45:00 发布
阅读量2k 收藏 7
点赞数
分类专栏： Vue 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/122232714
版权
1、组件访问state的第一种方法

this.$store.state.全局数据名称

2、组件访问state的第二种方法
  • 从vuex中按需导入mapState函数
import{ mapState } from ‘vuex’
  • 将全局数据，映射为当前组件的计算属性
 computed：{
 	...mapState(['count'])
 }

完整代码：

<template>
  <div>
    <h3>当前最新的count值为：{{count}}</h3>
    <button>-1</button>
  </div>

</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'Subtraction',
    data(){
      return {

      }
    },
    computed:{
      ...mapState(['count'])//不用写计算属性的逻辑
    }
  }
</script>

<style scoped>

</style>
3、Mutation中修改数据

推荐使用mutation变更store中的数据

  1. 只能通过mutation变更store数据，不可以直接操作store中的数据
  2. 通过这种方式可以集中监控所有数据的变化

定义mutation

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      //变更状态
      state.count++
    }
  },
  actions: {
  },
  modules: {
  }
})

触发mutation

methods：{
	handlel(){
		//触发mutations的第一种方式
		this.$store.commit('add')
	}
}

完整代码：
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    }
  },
  actions: {
  },
  modules: {
  }
})

app.vue

<template>
  <div id="app">
    <my-addition> </my-addition>
    <hr/>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
  import Addtion from './components/Addtion.vue'
  import Subtraction from './components/Subtraction.vue'

  export default {
    name:'App',
    data(){
      return{

      }
    },
    components:{
      'my-addition':Addtion,
      'my-subtraction':Subtraction
    }
  }
</script>

<style>

</style>

addtion.vue

<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.count}}</h3>
    <button @click="addcount">+1</button>
  </div>
</template>

<script>
  export default {
    name: 'Addtion',
    data(){
      return{
      }
    },
    methods:{
      addcount(){
        //第一种方法
        this.$store.commit('add')
      }
    }
  }
</script>

<style scoped>

</style>
4、Mutation中传参

定义mutation

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    addN(state,step){
      //变更状态
      state.count+=step
    }
  },
  actions: {
  },
  modules: {
  }
})

触发mutation

methods：{
	handlel(){
		//触发mutations的第一种方式
		this.$store.commit('add',N)
	}
}

完整案例
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state，N){
      state.count+=N
    }
  },
  actions: {
  },
  modules: {
  }
})

app.vue

<template>
  <div id="app">
    <my-addition> </my-addition>
    <hr/>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
  import Addtion from './components/Addtion.vue'
  import Subtraction from './components/Subtraction.vue'

  export default {
    name:'App',
    data(){
      return{

      }
    },
    components:{
      'my-addition':Addtion,
      'my-subtraction':Subtraction
    }
  }
</script>

<style>

</style>

addtion.vue

<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.count}}</h3>
    <button @click="addcount(10)">+1</button>
  </div>
</template>

<script>
  export default {
    name: 'Addtion',
    data(){
      return{
      }
    },
    methods:{
      addcount(N){
        //第一种方法
        this.$store.commit('addN',N)
      }
    }
  }
</script>

<style scoped>

</style>
5、Mutation中触发mutations的第二种方法
  1. 从vuex中按需导入mapMutations函数
import { mapMutations} from ‘vuex’
  1. 通过导入的mapMutation函数，将需要的mutations函数，映射为当前组件的methods方法
methods:{
	...mapMutations(['add','addN'])
}

完整代码
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    },
    addN(state,N){
      state.count+=N
    }
  },
  actions: {
  },
  modules: {
  }
})

app.vue

<template>
  <div id="app">
    <my-addition> </my-addition>
    <hr/>
    <my-subtraction></my-subtraction>
  </div>
</template>
<script>
  import Addtion from './components/Addtion.vue'
  import Subtraction from './components/Subtraction.vue'

  export default {
    name:'App',
    data(){
      return{

      }
    },
    components:{
      'my-addition':Addtion,
      'my-subtraction':Subtraction
    }
  }
</script>

<style>

</style>

addtition.vue

<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.count}}</h3>
    <button @click="add()">+1</button>
    <button @click="addN(10)">+10</button>
    <button @click="myaddN(10)">+10</button>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    name: 'Addtion',
    data(){
      return{

      }
    },
    methods:{
      ...mapMutations(['add','addN']),
      myaddN(N){
        this.addN(N)
      }
    }
  }
</script>

<style scoped>

</style>
6、action中处理异步任务（含传参）

必须使用action来处理异步任务，但是，在action中最终还是要通过触发mutation的方式间接变更数据

  1. 注册action
export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    },
    addN(state,N){
      state.count+=N
    }
  },
  actions: {
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },2000)
    },
    addAsyncN(context,N){
      setTimeout(()=>{
        context.commit('addN',N)
      },2000)
    }
  },
  modules: {
  }
})
  1. 触发action
<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.count}}</h3>
    <button @click="myaddAsync">+1异步</button>
    <button @click="myaddNAsync(100)">+100异步</button>

  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    name: 'Addtion',
    data(){
      return{

      }
    },
    methods:{
      myaddAsync(){
        //触发actions的第一种方式
        this.$store.dispatch('addAsync')
      },
      myaddNAsync(N){
        //触发actions的第一种方式
        this.$store.dispatch('addAsyncN',N)
      }
    }
  }
</script>
7、action中触发actions的第二种方法

1. 从vuex中按需导入mapActions函数

import { mapActions} from ‘vuex’

2. 通过刚才导入的mapAction函数，将需要的actions函数，映射为当前组件的methods方法：
触发actions方法

methods:{
      ...mapActions(['addAsync','addAsyncN']),
    }

上例基础上修改addtion.vue文件
addtion.vue

<template>
  <div>
    <h3>当前最新的count值为：{{$store.state.count}}</h3>
    <button @click="myaddAsync">+1异步</button>
    <button @click="myaddNAsync(100)">+100异步</button>
    <button @click="secaddNAsync(1000)">+1000异步</button>
  </div>
</template>

<script>
  import {mapMutations,mapActions} from 'vuex'
  export default {
    name: 'Addtion',
    data(){
      return{

      }
    },
    methods:{
      myaddAsync(){
        //触发actions的第一种方式
        this.$store.dispatch('addAsync')
      },
      myaddNAsync(N){
        //触发actions的第一种方式
        this.$store.dispatch('addAsyncN',N)
        console.log(N)
      },
      ...mapActions(['addAsync','addAsyncN']),
      secaddNAsync(N){
        this.addAsyncN(N)
      }
    }
  }
</script>

<style scoped>

</style>
8、Getter

getter用于对store中的数据进行加工处理成新的数据

  1. getter可以对store中已有的数据加工处理之后形成新的数据，类似于计算属性
  2. Store中数据发生变化，getter的数据也会跟着变化

定义getter

getters：{
	showNum:state=>{
	return '当前最新的数量是'+state.count
	}
}

使用getters的第一种方法

this.$store.getters.名称

使用getters的第二种方法

  import {mapGetters} from 'vuex'

computed:{
      ...mapGetters(['addcount']),
 }

完整代码：
store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  getters:{
    addcount:state => {
      return state.count+=15
    }
  },
  mutations: {
    add(state){
      state.count++
    },
    addN(state,N){
      state.count+=N
    }
  },
  actions: {
    addAsync(context){
      setTimeout(()=>{
        context.commit('add')
      },2000)
    },
    addAsyncN(context,N){
      setTimeout(()=>{
        context.commit('addN',N)
      },2000)
    }
  },
  modules: {
  }
})

addtion.vue

<template>
  <div>
    <h3>当前最新的count值为：{{$store.getters.addcount}}</h3>
    <h3>当前最新的count值为：{{addcount}}</h3>
    <button @click="myaddAsync">+1异步</button>
    <button @click="myaddNAsync(100)">+100异步</button>
    <button @click="secaddNAsync(1000)">+1000异步</button>
  </div>
</template>

<script>
  import {mapMutations,mapActions,mapGetters} from 'vuex'
  export default {
    name: 'Addtion',
    data(){
      return{

      }
    },
    computed:{
      ...mapGetters(['addcount']),
    },
    methods:{
      myaddAsync(){
        //触发actions的第一种方式
        this.$store.dispatch('addAsync')
      },
      myaddNAsync(N){
        //触发actions的第一种方式
        this.$store.dispatch('addAsyncN',N)
        console.log(N)
      },
      ...mapActions(['addAsync','addAsyncN']),

      secaddNAsync(N){
        this.addAsyncN(N)
      }
    }
  }
</script>

<style scoped>

</style>
心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex学习的小例子，包含所有的State、Getter、Mutation、Action、Module的使用
03-15
在这个“vuex学习的小例子”中，我们将深入理解Vuex的核心概念：State、Getter、Mutation、Action以及Module。 **State** 在Vuex中，State是存储应用全局状态的地方。所有组件都可以访问这些状态，但直接修改State...
【Vuex】Vue从仓库中获取state中数据的方法
forever__fish的博客
10-10 5613
在Vue中，我们离不开组件间的通信，有父子通信、兄弟通信、跨级通信等。由此，数据的存储是一个需要考虑的问题，什么方法能够使数据容易读取还不浪费内存呢？这需要根据具体问题具体分析。常见的方法有 props、$emit、$children、$root、vuex 等，今天我们重点分析一下使用vuex来存储数据并如何去获取数据。
Vuex 之一：3种拿到 state 中数据的方式与实例剖析
狮子座的男孩
07-09 1万+
1、Vuex 的简介 其一、Vuex 是什么？ 其二、Vuex 的图例讲解 其三、Vuex 的配置过程 2、如何引入并使用 Vuex 其一、用 `vue-cli` 创建 其二、在 `src` 下建一个 `store` 文件夹并创建 `index.js` 文件 其三、要在 `main.js` 文件中挂载一下 其四、然后在 `App.vue` 中使用 3、实例剖析在 App.vue 中使用 state 的过程 ......
vue中store.state、$store.state和this.$store.state的适用场景
最新发布
大剑师兰特的GIS世界
06-05 1028
通常情况下，在组件内部，推荐使用 `this.$store.state`，而在非组件的上下文中（如 Vuex 的模块定义、actions、mutations 或 getters）使用 `store.state` 更为合适。
vuex中mutation/action的传参方式
热门推荐
Wopelo的博客
05-11 3万+
前言 在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。 这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下 //vuex中的state const st...
vue 利用vuex存入数据和取出数据的方法
宁夏前端工程师，马卫斌，wx：1457508895
10-30 3072
在Vue中，你可以使用Vue的状态管理模式（Vuex）来存储和获取数据。Vuex提供了一个全局的存储库，允许你在应用程序的任何组件中访问和修改数据。方法用于存储数据，接受一个payload参数，其中包含要存储的数据。然后，在你的Vue项目中创建一个store文件夹，并创建一个名为。接下来，你可以在组件中使用这些方法来存储和删除数据。（或者其他你喜欢的名字）的文件。
Vuex（二）修改状态 - 传递参数 - 模块组
why404
04-23 1867
一、mutations-getters-actions异步 1、mutations（修改状态） （1）template中直接使用$store.commit( )触发 // template <button @click="$store.commit('ADD')">+</button> // src/vuex/store.js const mutations = { ...
【VUEX】最好用的传参方式--Vuex的详解
m0_74315688的博客
10-11 3130
vuex是什么？为什么要用它？它解决了程序员的什么问题？我们应该如何使用它？ 一篇文章解决所有问题！！！！！！！
Vuex中的actions的参数
小羊的博客
09-03 1万+
actions可以说是mutation的加强版，它可以通过commit mutations中的方法改变状态，最重要的是它可以进行异步操作，在组件中通过$store.dispatch来触发action中定义的方法。 今天是要来说一下action函数的参数 一般在使用actions方法时我们会像下面的书写方式： actions:{ add_num({commit}){ c...
Vuex中实现数据状态查询与更改
10-16
在Vue.js应用中，Vuex是一个非常重要的状态管理库，它提供了一种集中式的存储机制，使得组件之间能够共享和管理全局状态。本篇文章将详细解释如何在Vuex中实现数据状态的查询与更改。 首先，为了在Vue应用中使用...
vuex actions异步修改状态的实例详解
10-16
`actions` 接收一个 `context` 对象作为参数，这个对象包含了 `state`、`commit`、`getters` 和 `dispatch` 方法，其中 `commit` 用于触发一个 `mutation`，而 `dispatch` 可以触发另一个 `action`。这样设计的好处...
vuex的demo，包括数据请求
05-03
1. **State（状态）**：Vuex 中的核心就是 State，它存储着应用的所有共享状态。在描述中提到的仓库，实际上就是指 State，它是全局唯一的，任何组件都可以通过 Store 访问到这些状态。 2. **Mutations（变异）**：...
vuex:Vue-Vuex
04-27
1. **State（状态）**：应用程序中的所有数据都存储在状态树中，它是全局的，所有组件都可以访问。但直接修改 State 是不被允许的，必须通过 Mutation 来进行。 2. **Mutations（ mutation 事件）**：Mutation 是...
vuex五个属性及其使用传参
Infinityfeng的博客
08-27 1031
state：vuex的基本数据，用来存储变量 geeter：从基本数据(state)派生的数据，相当于state的计算属性 mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。 action：和mutation的功能大致相同，不同之处在于 ==》..
vuex存取值简单应用
qq_30815659的博客
12-19 871
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。 那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步） 一、适合初学者使用，保存数据以及获取数据 1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，
详细解说vuex的简单使用，存值和取值
qq156831414的博客
06-29 1583
详细解说vuex的简单使用，存值、取值
由vuex中getters初始返回值为undefined引起的渲染错误:“TypeError:无法读取未定义的属性(读取‘XXX等‘)“
a1071626267的博客
10-08 2260
由vuex中getters初始返回值为undefined引起的渲染错误:"TypeError:无法读取未定义的属性(读取'XXX等')"
Vuex Mutation变更Store中的数据
m0_48546501的博客
04-07 1514
Vuex Mutation变更Store中的数据
vuex(store) 之 mutations详解， 及store中的state是响应式的条件
qq_46302247的博客
05-31 3000
1、mutations的提交风格 // @/store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { counter: 10 }, getters: { }, mutations: { addCounter(state,counter) { console.log(counter,'
在action的处理函数中，可以直接操作state来变更数据。
06-09
实际上，在Vuex中，action是不能直接修改state的，它们只能通过提交mutation来间接修改state。这是因为在Vuex中，state是唯一的数据源，它应该是响应式的，只能通过mutation来修改，以便能够追踪状态的变化。 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值