Vue2中关于vuex的应用，包括Vuex模块化+命名空间的使用，四个map方法的使用等

已于 2023-05-12 20:06:48 修改
阅读量1.4k 收藏 5
点赞数 4
文章标签： javascript vue.js 前端 前端框架
于 2023-05-12 20:05:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62508027/article/details/130648452
版权


一、概念

​ 在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

注意：在vue2中一定要使用vuex3

二、何时使用？

​ 多个组件需要共享数据时使用。

三、搭建 vuex 环境

1. 创建 '/src/store/index.js'文件 

​
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex'
Vue.use(Vuex)

// 准备actions，用于响应组件中的动作
const actions = {}
// mutations 用于操作数据（state）
const mutations = {}
// state 用于存储数据
const state = {}

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

​

2.在main.js文件中传入store配置项

// 引入Vue
import Vue from 'vue';
// 引入App
import App from './App.vue';

import store from './store/index'

// 关闭vue的生产提示
Vue.config.productionTip = false;

// 创建vm
new Vue({
  el: '#app',
  render: createElement => createElement(App),
  store
})

四、基本使用

1.初始化数据、配置`actions`、配置`mutations`，操作文件`store.js`

// 引入Vue
import Vue from 'vue';
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex) // use 之后创建vm的时候，可以有store配置项

// 准备actions，用于响应组件中的动作
const actions = {
  // 可简写为 jiaOdd(context, value){}
  jiaOdd: function (context, value) {
    if (context.state.sum % 2 != 0) {
      context.commit('JIA', value)
    }
  }
}
// mutations 用于操作数据（state）
const mutations = {
  JIA(state, value) {
    state.sum += value;
  }
}
// state 用于存储数据
const state = {
  sum: 0
}
export default new Vuex.Store({
  actions,
  mutations,
  state
})

2.在子组件Count中使用vuex保存的数据，或方法

<template>
  <div>
    <h1>数据之和sum值为: {{$store.state.sum}}</h1>
    <select v-model.number="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="incrementOdd">当前sum为奇数则相加</button>
  </div>
</template>
<script>
export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  methods: {
    increment() {
      this.$store.commit('JIA', this.n)
    },
    incrementOdd() {
      this.$store.dispatch('jiaOdd', this.n)
    }
  }
}
</script>

<style scoped>
button {
  margin-left: 15px;
}
</style>

3.在根组件App中引入、注册、使用子组件

<template>
  <div>
    <Count />
  </div>
</template>

<script>
import Count from './components/count.vue'
export default {
  name: 'app',
  components: {
    Count
  }
}
</script>

<style>
</style>

 4.以上代码运行结果如下：

 当点击按钮，sum值会有相应的变化并在页面中渲染。

 备注：

（1）若没有网络请求或其他业务逻辑，组件中也可以越过 actions，即不写`dispatch`，直接编写`commit`

（2）组件中读取state中存储的数据 sum，使用 $store.state.sum

五、getters 的使用

1.在 '/store/index.js'中追加 getters 配置

// 引入Vue
import Vue from 'vue';
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex) // use 之后创建vm的时候，可以有store配置项

// 准备actions，用于响应组件中的动作
const actions = {
  // 可简写为 jiaOdd(context, value){}
  jiaOdd: function (context, value) {
    if (context.state.sum % 2 != 0) {
      context.commit('JIA', value)
    }
  }
}
// mutations 用于操作数据（state）
const mutations = {
  JIA(state, value) {
    state.sum += value;
  }
}
// state 用于存储数据
const state = {
  sum: 0
}
// getters 用于将state中的数据进行加工
const getters = {
  doubleSum(state) {
    return state.sum * 2;
  }
}
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})

2.在Count组件中对getters中的方法进行应用

<template>
  <div>
    <h1>数据之和sum值为: {{$store.state.sum}}</h1>
    <h1>数据之和sum值的2倍为: {{$store.getters.doubleSum}}</h1>
    <select v-model.number="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="incrementOdd">当前sum为奇数则相加</button>
  </div>
</template>
<script>
export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  methods: {
    increment() {
      this.$store.commit('JIA', this.n)
    },
    incrementOdd() {
      this.$store.dispatch('jiaOdd', this.n)
    }
  }
}
</script>

<style scoped>
button {
  margin-left: 15px;
}
</style>

 3.以上代码运行结果如下：

 备注：

（1）当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工。

（2）组件中使用getters中的数据，使用 `$store.getters.bigSum`

 六、四个 map 方法的使用

1.组件Count中使用map方法后的代码如下：

<template>
  <div>
    <h1>数据之和sum值为: {{sum}}</h1>
    <h1>数据之和sum值的2倍为: {{doubleSum}}</h1>
    <select v-model.number="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="incrementOdd(n)">当前sum为奇数则相加</button>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    ...mapState(['sum']),
    ...mapGetters(['doubleSum'])
  },
  methods: {
    ...mapActions({ incrementOdd: 'jiaOdd' }),
    ...mapMutations({ increment: 'JIA' })
  }
}
</script>

<style scoped>
button {
  margin-left: 15px;
}
</style>

2.注意事项：

mapActions 与 mapMutations 使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

七、模块化+命名空间

1.组件count的代码

<template>
  <div>
    <h1>数据之和sum值为: {{sum}}</h1>
    <h1>数据之和sum值的2倍为: {{doubleSum}}</h1>
    <h3 style="color: red">下方组件列表第一个人的名字为： {{firstPersonName}}</h3>
    <select v-model.number="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="incrementOdd(n)">当前sum为奇数则相加</button>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    ...mapState('countAbout', ['sum']),
    ...mapGetters('countAbout', ['doubleSum']),
    ...mapGetters('personAbout', ['firstPersonName'])
  },
  methods: {
    ...mapMutations('countAbout', { increment: 'JIA' }),
    ...mapActions('countAbout', { incrementOdd: 'jiaOdd' })
  }
}
</script>

<style scoped>
button {
  margin-left: 15px;
}
</style>

2.组件person的代码

<template>
  <div>
    <h1 style="color: red">上方count组件求和为: {{sum}}</h1>
    <h3>列表中第一个人的名字是: {{firstPersonName}}</h3>
    <input type="text" placeholder="请输入姓名" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <ul>
      <li v-for="person in personList" :key="person.id">{{person.name}}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
  name: 'person',
  data() {
    return {
      name: ''
    }
  },
  computed: {
    sum() {
      return this.$store.state.countAbout.sum;
    },
    firstPersonName() {
      return this.$store.getters['personAbout/firstPersonName'];
    },
    personList() {
      return this.$store.state.personAbout.personList;
    }
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.name = '';
      this.$store.commit('personAbout/ADD_PERSON', personObj)
    },
    addWang() {
      const personObj = { id: nanoid(), name: this.name };
      this.name = '';
      this.$store.dispatch('personAbout/addPersonWang', personObj)
    }
  }
}
</script>

<style scoped>
button {
  margin-left: 15px;
}
</style>

3. './store/index.js'的代码

​
// 引入Vue
import Vue from 'vue';
// 引入vuex
import Vuex from 'vuex'
Vue.use(Vuex) // use 之后创建vm的时候，可以有store配置项

const countOptions = {
  namespaced: true,
  actions: {
    // 可简写为 jiaOdd(context, value){}
    jiaOdd: function (context, value) {
      if (context.state.sum % 2 != 0) {
        context.commit('JIA', value)
      }
    }
  },
  mutations: {
    JIA(state, value) {
      state.sum += value;
    }
  },
  state: {
    sum: 0,
  },
  getters: {
    doubleSum(state) {
      return state.sum * 2;
    }
  }
}
const personOptions = {
  namespaced: true,
  actions: {
    addPersonWang(context, value) {
      if (value.name.indexOf('王') === 0) {
        context.commit('ADD_PERSON', value);
      } else {
        alert('添加的人必须姓王！')
      }
    }
  },
  mutations: {
    ADD_PERSON(state, value) {
      state.personList.unshift(value);
    }
  },
  state: {
    personList: [
      { id: '001', name: '张三' }
    ]
  },
  getters: {
    firstPersonName(state) {
      return state.personList[0].name;
    }
  }
}


export default new Vuex.Store({
  modules: {
    countAbout: countOptions,
    personAbout: personOptions
  }
})

​

4.以上代码运行结果如下：

5.注意点

（1）使用模块化目的：让代码更好维护，让多种数据分类更加明确。

（2）Vuex模块化后，一定要开启命名空间，配置 namespaced: true。

（3）开启命名空间，模块化后，读取各数据

 读取state数据：

// 方式一：通过$store.state读取
this.$store.state.Vuex模块化名称.数据属性名

// 方式二：通过mapState方式简写读取
computed: {
    ...mapState('Vuex模块化名称', ['数据属性名', ...])
}

getters数据：

// 方式一：通过$store.getters读取
this.$store.getters['Vuex模块化名称/getters数据名']

// 方式二：通过mapGetters方式简写读取
computed: {
    ...mapGetters('Vuex模块化名称', ['getters数据名', ...])
}

调用dispatch(调用时，一定要传参)：

<!-- 调用incrementOdd，并传参为num -->
<span @click="incrementOdd(num)"></span>

// 方式一：通过$store.dispatch
this.$store.dispatch('Vuex模块化名称/Actions中的方法名称', value)

// 方式二：通过mapActions方法简写
methods: {
    ...mapActions('Vuex模块化名称', {incrementOdd: 'Actions中的方法名称', ...})
}

调用commit(调用时，一定要传参)：

<!-- 调用increment，并传参为num -->
<span @click="increment(num)"></span>

// 方式一：通过$store.dispatch
this.$store.commit('Vuex模块化名称/Mutations中的方法名称', value)

// 方式二：通过mapMutations方法简写
methods: {
    ...mapMutations('Vuex模块化名称', {increment: 'Mutations中的方法名称', ...})
}

   

   

   

白小水i
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2.0 Vuex的基本使用
白瑕 的博客
07-15 4951
Vuex可以更加方便的实现组件之间的数据共享,大家都把数据集中存储在一个地方(store),然后大家用数据的时候也都去那一个地方找.我觉得在数据交流需求比较大的情况下,这样会更有条理吧,不用在这里传一次再到另一个组件再接再传.刚看完教程,额,还是决定去看一下官方文档,虽然这必然意味着更多的时间投入.但是我也不想以后跟人家说"阿,我会vuex."然后就只是会用,别的一概不知..........
使用Vuex+Vue.js构建单页应用
02-24
我们将大概的过一遍什么是Vuex.js，在项目中什么时候使用它，和如何构建我们的Vue应用。这里放一张我们项目的预览图片：项目源码：；有需要的同学可以直接下载源码查看。状态管理机制的使用的基础api脚手架的安装及...
Vue2中Vuex的基本使用
xtcgjk的博客
02-18 2410
本文主要介绍vue2中vuex的基本用法，以及如何实现模块化
vue2中vuex详细使用
m0_62785037的博客
01-07 958
vue2中vuex详细使用，辅助mapState函数放入计算属性，辅助mapMutations放入methods里面。
【Vue2】Vuex的基本认知
weixin_40874076的博客
05-02 127
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
Vue2 vuex贯穿全局,通篇掌握
技术前端，忠于热爱 @0.活在风浪里
01-07 2745
当然了小伙伴首先用一个东西要搞清楚它是嘛用,它怎么用,我会以最为通俗易懂的事例,详解这篇vuex,最重要的是将学会的东西记录下来,咱们忘了学,学了忘,忘了在学,人嘛都会忘,刻记一点,永远不要放弃, 你 不比任何人要差 纸上学来终觉浅，绝知此事要躬行 vuex概念 vuex 是一个状态管理工具，主要解决大中型复杂项目的 数据共享问题，主要包括 state,mutations,actions,getters 和 modules 5 个要 素，主要流程：在页面通过 调用...
vue2中使用es6的map实现的发布任务
柠的博客
04-26 399
在vue2中实现一个由es6的map实现的发布任务页遇到的问题
Vue的状态管理vuex使用方法详解
10-15
引入vuex，首先我们需要创建一个store对象，它包含了state、mutations和actions等核心概念。state存储应用的全局状态，是所有组件共享的数据源。mutations是修改state的唯一途径，它们是同步的，每次state的改变都...
VUE使用vuex解决模块间传值问题的方法
08-30
VUE使用Vuex解决模块间传值问题的方法 Vuex是Vue.js官方提供的状态管理器，能够帮助开发者更好地管理应用程序的状态。Vuex提供了一个centralized store，用于存储应用程序的状态，并提供了ações、mutations、...
vue2项目+elementui+axios+vueRouter+vuex+less初始化项目
05-23
Vuex是Vue生态中的状态管理库，它集中管理应用的状态，提供了统一的存储空间和操作状态的方法。Vuex遵循 Flux 的单向数据流概念，将应用的状态分为状态(state)、派发器(dispatch)、 mutations(状态变更)和actions...
vue2和vue3中vuex的区别和使用方法详解？
前端-尔嵘
03-14 2078
Vue.js 是一款流行的前端框架，它提供了 Vuex 管理应用的全局状态。在 Vue 2 和 Vue 3 中，Vuex 的使用方法有些区别。在 Vue 2中，组件中需要使用 $store 方法来获取 Vuex 的状态和方法了。
Vue 2
GQDD99的博客
12-23 344
vue2/3笔记
vue2项目中引入vuex
weixin_62616050的博客
12-12 342
注意如果输入npm install vuex会安装vuex4版本，而vuex4只能在vue3中使用，因此安装vuex3才能在vue2中使用。4、index.js文件中插入以下代码。这里的name变量便可以在任意组件通过$store.state.name使用了。1、在终端输入npm install vuex@3 --save。3、在src下新建store文件夹和index.js文件。2、在main.js文件中引入。
vue2（7）之vuex使用/state状态//mutations修改数据/getters/模块化module/获取模块内的数据state&getters与方法
最新发布
qq_66318904的博客
05-06 1227
目标：明确Vuex是什么，应用场景以及优势state: {count: 0},// 定义mutations})getters: {// getters函数的第一个参数是 state// 必须要有返回值，返回值就是getters的值// }
在vue2和vue3中Vuex的使用及其持久化存储,mutation和actions的区别
无简介！！
11-13 1300
到这里 我们就发现 一个问题,感觉mutations和这个Actions好像 都是一个方法然后 也都能实现 同样的功能 除了 参数有点不一样以外。我们发现 使用mutations 中的方法 在异步操作的时候 视图更新了 而 这个数据却没有变化。就像官网所说的 vuex 就是一个用来做状态管理的库,它就像一个仓库一样存了许多的状态和方法。ok 这样就把所有的 Vuex的属性给做完了 基本上的使用 就这样。然后 我们想要在组件中使用cate.js和path.js中的数据时。
vue2 mapEchart示例
weixin_43987651的博客
10-20 302
vue2 mapEchart示例
VUE2,VUE3中Vuex的使用详解
ICanWin_lll的博客
08-16 1648
文章目录 一、Vuex是什么 二、State 数据源 2.1 通过 this.$store.state.全局数据名称 访问 2.2 mapState 映射为计算属性 三、Mutations 变更store中的数据 3.1 this.$store.commit() 触发 mutations 3.1.1 触发 mutations 时传递值 3.2 MapMutations 映射为方法 四、Actions 专门处理异步操作 .
vue2 按需引入 vuex 模块
HeMister的博客
05-11 756
目录 store/index.ts import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 使用 require.context 动态引入 vuex modules const modulesFiles = require.context('./common', true, /\.ts$/) const modules = modulesFiles.keys().reduce((module: any, modulePath) =&

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值