vuex之state、Mutations、getters、actions、modules

最新推荐文章于 2023-10-25 16:28:48 发布
最新推荐文章于 2023-10-25 16:28:48 发布
阅读量500 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： state actions getters mutations modules
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44010187/article/details/96307312
本文详细介绍了Vue.js应用中使用Vuex进行状态管理的方法，包括状态（state）、提交（mutations）、获取器（getters）及操作（actions）的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

state
1.文件创建
当然，文件创建的位置自己可以定，本文例子都在src文件夹下进行创建。
main.js

import Vue from 'vue'
import store from './store'
import vuex_test from './vuex_test.vue'


new Vue({
  el:'#app',
  store,
  render:xx=>xx(vuex_test)
})

vuex_test.vue

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{$store.state.count}}----------{{count}}</p>
  </div>
</template>
<script>
  export  default {
    name : 'app',
    data() {
      return {
        count : 0       // 计算属性名称不能与data中定义的数据相同 The computed property "count" is already defined in data.
      }
    }
  }
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

export default new Vuex.Store({
  state

})

最基本的用法{{$store.state.count}}引用，显示结果：
在这里插入图片描述
其他 方式引用1：
vuex_test.vue中添加：

computed : {
      count(){
        return this.$store.state.count+2
      }
    }

哦豁，报错了，让我们看下错误：

vue.esm.js?c5de:628 [Vue warn]: The computed property "count" is already defined in data.
found in
---> <App> at src/vuex_test.vue
       <Root>

在这里插入图片描述
然后我百度了下原因：
Vue binds all properties in the data method to the root of the instance. It also does this for computed properties, and methods, so you must use different names to avoid naming conflicts.
The main problem in the code you posted is that you have naming conflicts with every data property. In fact, because you are using a Vuex store, you don’t need the data properties at all, just the computed properties.
翻译过来是：
VUE将数据方法中的所有属性绑定到实例的根。它还对计算的属性和方法执行此操作，因此您必须使用不同的名称来避免命名冲突。
您发布的代码中的主要问题是，您与每个数据属性都存在命名冲突。实际上，因为您使用的是Vuex存储，所以根本不需要数据属性，只需要计算的属性。

大概意思就是data中的count和computed中的count命名冲突了，咱们只用到计算属性了，所以data中去掉，他出现的本地也只是为了给｛｛count｝｝赋初值而已。

去掉后，看结果：

在这里插入图片描述
其他 方式引用2：
vuex_test.vue中添加：

computed:mapState({
      // count:state => state.count
      count:function (state) {
        return state.count
      }
    })

另外记得引用mapState

import { mapState } from 'vuex'

在这里插入图片描述
剩下一种其实类似于上面，适应于只显示不变更数据的情况：

//辅助函数，映射this.count到$stote.state.count
    // computed:mapState([
    //   "count"
    // ]),

    computed: {
      ...mapState([
        'count'
      ])
    }

注意上面第一种为直接数组的格式，第二种为标准语法，三个点去掉就报错滴
在这里插入图片描述

这就是获取store中的state数据并显示的几种情况，切记，多个computed时只有一个会生效，默认最后一个生效，本文例子记得将原来的覆盖或者注释掉

接下来便是Mutations触发状态的用法：
store.js文件中规定Mutations中几种规则并下方调用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

export default new Vuex.Store({
  state,
  mutations

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations } from 'vuex'
  export  default {
    name : 'app',
    computed: {
      ...mapState([
        'count'
      ])
    },
    // methods:mapMutations([
    //   'addNumber',
    //   'delNumber'
    // ])
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ])
    }
  }
</script>

运行结果：
在这里插入图片描述

getters的用法：
store.js中修改添加：

const getters = {
  count:function(state){
    return state.count += 100
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ])
    }
  }
</script>

运行结果：
在这里插入图片描述

action异步加载：
store.js中添加： getters中暂且设置为0

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

const getters = {
  count:function(state){
    return state.count += 0
  }
}

const actions = {
  addNumberP(context){
    context.commit('addNumberByObject',{a:5,b:10}),
      setTimeout(() =>{
        context.commit('delNumber')
      },3000)
    console.log("本条语句先与计时器被执行")
  },
  delNumberP({commit}){
    commit('delNumber')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions

})

vuex_test.vue中进行修改：

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
    <p>
      <button @click="addNumberP">actions-addNumberP</button>
      <button @click="delNumberP">actions-delNumberP</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ]),
        ...mapActions({
            addNumberP:'addNumberP',
            delNumberP:'delNumberP'
          })
      }
  }
</script>

在这里插入图片描述
执行结果：
先计数成为15，然后执行log输出，最后count-1变成14
在这里插入图片描述

附完整代码：
store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 访问状态对象
const state = {
  count:0
}

// 访问触发状态
const mutations = {
  addNumberByNumbert(state,n){
    state.count += n;
  },
  addNumberByObject(state,obj){
    state.count += (obj.a+obj.b);
  },
  addNumber(){
    state.count ++;
  },
  delNumber(state){
    state.count --;
  }
}

const getters = {
  count:function(state){
    return state.count += 0
  }
}

const actions = {
  addNumberP(context){
    context.commit('addNumberByObject',{a:5,b:10}),
      setTimeout(() =>{
        context.commit('delNumber')
      },3000)
    console.log("本条语句先与计时器被执行"+new Date())
  },
  delNumberP({commit}){
    commit('delNumber')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions

})

vuex_test.vue

<template>
  <div id="app">
    <h2>hello vuex</h2>
    <p>{{count}}</p>
    <p>
      <button @click="$store.commit('addNumberByNumbert',5)">n增数 每次增加n(10)</button>
      <button @click="$store.commit('addNumberByObject',{a:10,b:20})">对象调用 每次增加a(10)+b(20)=30</button>
    </p>
    <p>
      <button @click="addNumber">addNumber</button>
      <button @click="delNumber">delNumber</button>
    </p>
    <p>
      <button @click="addNumberP">actions-addNumberP</button>
      <button @click="delNumberP">actions-delNumberP</button>
    </p>
  </div>
</template>
<script>
  import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
  export  default {
    name : 'app',
    computed:{
        ...mapState([
          'count'
        ]),
        ...mapGetters([
          'count'
        ])
    },
    methods:{
        ...mapMutations([
                       'addNumber',
                       'delNumber'
                     ]),
        ...mapActions({
            addNumberP:'addNumberP',
            delNumberP:'delNumberP'
          })
      }
  }
</script>

模版的简单用法：
在这里插入图片描述
在这里插入图片描述

运行结果：
在这里插入图片描述

vuex中的state getters mutations actions modules
ANGWH的博客
08-09 424
Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex是单向数据流； 安装Vuex 命令行： vue add vuex 安装完成以后在src文件夹中多了一个store文件夹，这个index.js文件是vuex的主文件 index.js中要有 Vue.use(Vuex) //在vue构造函数中去注入vuex，在vue实例对象中有$store 一般下载后就有 Vuex的stor
vue3知识点7 vue3.0+cli4.5 vuex vuex安装配置 state mutations actions modules命名空间 getters
yangyangdt的博客
01-09 869
本文详解了vue3.0+vue-cli4.5的vuex中各种属性的用法。state mulations actions modules getters等。
Vuex modules模式下mapState/mapMutations的操作实例
10-16
主要介绍了Vuex modules 模式下 mapState/mapMutations 的操作实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vuex最全使用总结(state、mutations、actions、getters、modules模块化)
旭哥的博客
05-20 4454
一、Vuex各部分介绍 安装 npm install vuex --save 1、store中代码 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // 此处存储数据 }, mutations: { // 此处用于处理state中数据，存放方法类似vue中的methods }, actions: { /
vue Vuex 使用 state getters、mutations、actions、modules
蜗牛速度额的博客
12-16 856
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;...
state getters mutations actions modules
weixin_41675013的博客
05-06 122
Vue2|浅学一下VueX吧（state,getters,mutations,actions,modules)
weixin_62395055的博客
03-03 1369
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,其实通俗一点来讲可以理解成放公共变量的地方，你可以在这里放各个组件之间用到的变量，不用传来传去，你可能会想，我自己拿一个组件专门放公共变量挂到Vue的prototype上面去不就行了，也行，但是不是响应式的，要是你说写一个响应式的也不是不行，那也行，那你挺牛。 官网上扒拉下来这张图 import { createStore } from 'vuex' export default createStore({ state: {
vuex 核心概念 state、mutations、actions、getters
缚己
03-02 566
核心概念 state mutations actions modules 手动引入vuex 如果在vue脚手架中没有引入vuex需要进行手动配置。 在main.js中添加如下代码： import store from 'vuex' // 在创建vue实例时，将store挂载进去 new Vue({ render: h => h(App), store }).$mount('#app') state state中设置数据源，页面中所有在vuex中存放的数据都要放到store的state
在Vue-cli里应用Vuex的state和mutations方法
10-18
主要功能包括state、getters、mutations、actions和modules。 State是Vuex中最基本的存储单元，相当于组件的状态，用于存储我们需要管理的状态信息。例如，一个在线商城应用可能会维护一个包含商品、购物车信息等的...
黑马Vue -D7 — Vuex、 state、mutations、actions、getters、module
u010481557的博客
10-25 298
目标：明确Vuex是什么，应用场景以及优势state: {count: 0},// 定义mutations})通过mutations修改state的步骤1.定义 mutations 对象，对象中存放修改 state 的方法2.组件中提交调用 mutations(通过$store.commit(‘mutations的方法名’))getters: {// getters函数的第一个参数是 state// 必须要有返回值。
vuex的五个属性state、getters,、mutations,、actions、modules
guairena的博客
11-18 363
数据状态管理器（vuex） 作用：管理数据和状态 Vuex有五个核心概念： state, getters, mutations, actions, modules 使用（和 vue-router 一样） 下载包 vuex npm i vuex 引入包 vuex Vue 实例上注册 Vue.use(vuex) 创造一个仓库实例 const store = new Vuex.Store() 把创...
Vuex中的state、mutations、actions、modules、getters
weixin_43188893的博客
06-08 577
VueX Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 state 存储状态； 驱动应用的数据源 mutations 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation ； mutation必须是同步的，如果要异步需要使用action ； 它会接受 state 作为第一个参数 ，提交载荷作为第二个参数。（提交荷载在大多数情况下应该是一个对象）,提交荷载也可以省略 const store = new Vuex.Store({ state: {
vuex moduls模块化，mutations和actions使用区别
Jerry子辰的博客
02-25 700
vuex-moduls 在一些项目中vuex需要分成一些各自模块，彼此数据不影响 文件结构：在src/store内新建模块名的文件夹，例： a.js和aa.js 分别是模块a和aa 其中每个js文件都可以当成一个单独vuex结构来写，在a.js中（aa.js也差不多） export default { namespaced: true, // 详见后后面的使用方法3 state: { aId: '500' }, mutations: { changeId(state,va
vue的state, getters, mutations, actions, modules详解
姚辉乾
10-26 2157
  先安装Vuex     后面必须得用--save因为生产环境需要用到 npm install vuex --save 然后里 新建个store   下面新建个index 然后得在main.js里面导入一下，如下图： store 里面的num.js 和str.js用的module来写的demo里面没啥东西 我们再看一下在模板里面怎么写的 效果图： 源码：...
Vuex基础核心概念State,Mutations,Actions,Getters,Modules
horizon12的博客
03-29 281
Vuex 是专为vue.js设计的全局状态管理工具。集中管理检测组件（数据）的状态变化，实现全局状态下的数据共享，高效实现组件之间的数据通信，存储在Vuex中的数据都是响应式的。也就是说当Vuex中的数据发生改变的时候，调用该数据的组件也会同步发生变化。 vue组件之间通信： 父传子：通过v-bind绑定 子传父：通过v-on绑定方法 兄弟组件通信：通过定义一个evenBus事件总线进行通信 import Vue from ‘vue’ import Vuex from ‘vuex’ Vue.use(‘Vue
vuex之getters使用和传参
qq_42683773的博客
12-30 2313
除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters .js文件： state: { list: [1,2,3,4,5,6,7,8,9,10] } 组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它 **定义getters** getters: { // getters函数的第一个参数是 state // 必须要有返回值 fi
Vue进阶（四十三）：Vuex之Mutations详解
热门推荐
IT全栈 华强工作室
04-09 1万+
通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。 2.怎么用mutations？ mutation结构：每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发...
Vuex中mutations的用法
Anony_me的博客
04-01 1万+
Vuex中mutations的用法之一 在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合，这是Vuex 设计很重要的一点，就是把处理数据逻辑方法全部放在 mutations 里面，使得数据和视图分离。 Mutations使用 Vuex 中的 mutations 非常类似于事件，每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler)，也可以理解为{type:handler()}，这和订阅发布有
vuex基本使用( state, getters, mutations, actions, modules )
weixin_55556204的博客
02-11 676
store/index.js import { createStore } from 'vuex' export default createStore({ // 这里的state就相当于组件中的data，就是专门用于保存共享数据的 state: { count: 0, todos: [], }, // 用于定义计算属性 getters: { doneTodos: (state) => { return state.todos.filter(todo => todo.
vuex中的mutations和actions有何区别，为何要分成两个，请从使用、原理、场景等多个方面进行描述
最新发布
02-19
Vuex的状态管理包括state、getters、mutations、actions和modules。其中，mutations和actions是核心部分，但它们的职责不同。用户可能混淆了它们的用途，所以需要明确各自的角色。 从使用上看，mutations是同步的，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值