Vue组件：Vuex的使用及简化使用，模块化命名空间

最新推荐文章于 2024-07-27 07:15:00 发布
最新推荐文章于 2024-07-27 07:15:00 发布
阅读量1k 收藏 23
点赞数 21
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HakerDONG/article/details/135233161
版权

Vuex

集中式的状态管理，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex官网：https://vuex.vuejs.org/zh/guide/

在这里插入图片描述

  • state：初始数据
  • actions：请求接口数据
  • Mutations：修改数据

Vuex的使用

  1. 安装Vuex

    npm i vuex@3.2.0   (不带版本报错)

  2. 准备vuex配置文件

    在src同级目录下创建目录store，新建配置文件(index.js)

    // vuex配置文件
// 导入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from 'vuex';
// 应用vuex；vue加载vuex
Vue.use(Vuex)

// 准备Actions：响应组件中用户的作用（业务）
const actions={

}
// 准备mutations: 修改state中的数据
const mutations={

}

// 准备state： 保存初始数据
const state={

}
// 将vuex仓库暴漏出去
export default new Vuex.Store({
    actions,
    mutations,
    state
})

  3. 在main.js中配置

    import Vue from 'vue'
import App from './App.vue'
// 1.引入vuex配置文件
import store from "@/store";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store   // 2.将配置文件加载到vue上
}).$mount('#app')

入门案例：

案例一：取出Vuex中的数据

  1. 在vuex配置文件中的state中配置一个sum

    // 准备state： 保存初始数据
const state={
	sum:1024
}

  2. 创建一个组件，并拿vuex中的sum值

    <template>
  <div>
    <h1>当前和为：{{$store.state.sum}}</h1>
  </div>
</template>

<script>
export default {
  name: "Count"
}
</script>

<style scoped>

</style>

  3. 在App.vue中注册组件

    <template>
  <div id="app">
    <Count />
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: 'App',
  components: {Count}
}
</script>

    此时启动服务，访问就能看到sum的值

案例二：对sum进行求和操作

  1. 组件Count

    <template>
  <div>
    <h1>当前和为：{{$store.state.sum}}</h1>
    <h1>Double sum：{{$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="decrement">-</button>
    <button @click="addOdd">当和为奇数时添加</button>
    <button @click="addTimeOut">延迟一秒添加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data(){
    return{
      n:1
    }
  },
  methods:{
    increment(){
      this.$store.commit('add',this.n)  // 不需要走acitons的用commit
    },
    decrement(){
      this.$store.commit('sub',this.n)
    },
    addOdd(){
      this.$store.dispatch('addOdd',this.n) // 需要走acitons的用dispatch
    },
    addTimeOut(){
      this.$store.dispatch('addWait',this.n)
    }
  }
}
</script>

  2. vuex配置文件

    // vuex配置文件
// 导入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from 'vuex';
// 应用vuex；vue加载vuex
Vue.use(Vuex)

// 准备Actions：响应组件中用户的作用（业务）
const actions={
    addOdd(context,value){
        if(context.state.sum %2 !=0){
            context.commit('add',value)
        }
    },
    addWait(context,value){
        setTimeout(()=>{
            context.commit('add',value)
        },1000)
    }
}
// 准备mutations: 修改state中的数据
const mutations={
    add(context,value){
        state.sum += value;
    },
    sub(context,value){
        state.sum -= value;
    }
}

// 准备state： 保存初始数据
const state={
    sum:0
}

const getters={
    doubleSum(){
        return state.sum * 2;
    }
}

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

    参数context是上下文对象，可以通过context拿到state，mutations等

  3. App.vue中组测组件

简化Vuex的使用

简化读取

  1. 在组件中导入vuex
  2. 借助mapState生成计算属性，直接读取
<template>
  <div>
    <!-- 3:直接读取 -->
    <h1>当前和为：{{sum}}</h1>
    <h1>Double sum：{{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="decrement">-</button>
    <button @click="addOdd">当和为奇数时添加</button>
    <button @click="addTimeOut">延迟一秒添加</button>
  </div>
</template>

<script>
  // 1：导入Vuex
import {mapGetters,mapState} from 'vuex';

export default {
  name: "Count",
  data(){
    return{
      n:1
    }
  },
  computed:{
    // 2:借助mapState生成计算属性
    ...mapState(['sum']),
    ...mapGetters(['doubleSum'])
  },
  methods:{
    increment(){
      this.$store.commit('add',this.n)
    },
    decrement(){
      this.$store.commit('sub',this.n)
    },
    addOdd(){
      this.$store.dispatch('addOdd',this.n)
    },
    addTimeOut(){
      this.$store.dispatch('addWait',this.n)
    }
  }
}
</script>

简化方法

  1. 在组件中导入vuex：mapMutations，mapActions
  2. 借助mapMutations生成方法
  3. 调用时传参，事件绑定处传参
<template>
  <div>
<!--    <h1>当前和为：{{$store.state.sum}}</h1>-->
<!--    <h1>Double sum：{{$store.getters.doubleSum}}</h1>-->
    <h1>当前和为：{{sum}}</h1>
    <h1>Double sum：{{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="decrement(n)">-</button>
    <button @click="addOdd(n)">当和为奇数时添加</button>
    <button @click="addTimeOut(n)">延迟一秒添加</button>
  </div>
</template>

<script>
import {mapGetters,mapState,mapMutations,mapActions} from 'vuex';

export default {
  name: "Count",
  data(){
    return{
      n:1
    }
  },
  computed:{
    ...mapState(['sum']),
    ...mapGetters(['doubleSum'])
  },
  methods:{
    ...mapMutations({increment:'add',decrement:'sub'}),
    ...mapActions({addOdd:'addOdd',addTimeOut:'addWait'})
    // :前，为别名（在组件中方法的名字），:后单引号包裹为vuex的方法
  }
}
</script>

<style scoped>
</style>

模块化命名空间

当有多个组件，多个Vuex时，都在一个Vuex中配置不方便管理；一个组件一个Vuex管理，再在主Vuex配置中配置即可，即模块化命名空间

实现步骤：

  1. 在src同级目录下创建store目录

  2. 在store目录下创建各个组件的配置文件，如count.js、student.js

    count.js

    export default {
    // 开启命名空间
    namespaced: true,
    actions:{
        addOdd(context,value){
            if(context.state.sum %2 !=0){
                context.commit('add',value)
            }
        },
        addWait(context,value){
            setTimeout(()=>{
                context.commit('add',value)
            },1000)
        }
    },
    mutations:{
        add(state,value){
            state.sum += value;
        },
        sub(state,value){
            state.sum -= value;
        }
    },
    state:{
        sum: 0
    },
    getters:{
        doubleSum(state){
            return state.sum * 2;
        }
    }
}

    student.js

    import axios from "axios";

export default {
    namespaced: true,
    actions: {
        addStudent(context, value) {
            if (value.name.indexOf("张") == 0) {
                context.commit("ADD_STUDENT", value);
            } else {
                console.log("添加学生必须姓张");
            }
        }
    },
    mutations: {
        ADD_STUDENT(state, value) {
            state.studentList.unshift(value)
        }
    },
    state: {
        studentList: [
            {id: '001', name: '王五'}
        ]
    },
    getters: {
        stuListLength(state) {
            return state.studentList.length;
        }
    }
}

    常见错误：namespaced: true一定要添加，注意namespaced有个d

  3. 在store目录下创建主配置文件

    导入各组件的配置文件，并以模块的形式暴露出去

    // vuex配置文件
// 导入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from 'vuex';

// 导入
import countOptions from './count';
import studentOptions from './student';

// 应用vuex；vue加载vuex
Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        countAbout: countOptions,
        studentAbout: studentOptions
    }
})

  4. main.js中加载Vuex的配置文件

    import Vue from 'vue'
import App from './App.vue'
// 引入vuex配置文件
import store from "@/store";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store   // 将配置文件加载到vue上
}).$mount('#app')

  5. 组件中的使用

    Count组件：与之之前不同的是调用时要声明在哪个命名空间的Vuex配置文件中找

    <template>
  <div>
    <h1>当前学生总数:{{}}</h1>
    <hr>
    <h1>当前和为：{{sum}}</h1>
    <h1>Double sum：{{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="decrement(n)">-</button>
    <button @click="addOdd(n)">当和为奇数时添加</button>
    <button @click="addTimeOut(n)">延迟一秒添加</button>
  </div>
</template>

<script>
import {mapGetters,mapState,mapMutations,mapActions} from 'vuex';

export default {
  name: "Count",
  data(){
    return{
      n:1
    }
  },
  computed:{
    ...mapState('countAbout',['sum']),  //在countAbout的空间中找
    ...mapGetters('countAbout',['doubleSum'])
  },
  methods:{
    ...mapMutations('countAbout',{increment:'add',decrement:'sub'}),
    ...mapActions('countAbout',{addOdd:'addOdd',addTimeOut:'addWait'})
  }
}
</script>

    Student组件：

    方法调用的方式变为方法名前添加命名空间作为一级路径即可

    <template>
  <div>
    <h1>当前sum的值为：{{sum}}</h1>
    <ul>
      <li v-for="student in studentList" :key="student.id">
        {{ student.name}}
      </li>
    </ul>
    <input type="text" v-model="stuName" placeholder="请输入姓名,回车添加" @keydown.enter="addStudent"/>
  </div>
</template>

<script>
import  {mapState,mapActions} from 'vuex'
import {nanoid} from "nanoid";

export default {
  name: "Student",
  data(){
    return{
      stuName:''
    }
  },
  computed : {
    ...mapState('studentAbout',['studentList']),
    ...mapState('countAbout',['sum'])
  },
  methods:{
    addStudent(){
      let student = {id: nanoid(), name:this.stuName };
      this.$store.dispatch("studentAbout/addStudent",student)
      // 调用studentAbout命名空间中的方法
    }
  }
}
</script>

  6. 在App.vue中注册各个组件

    <template>
  <div id="app">
    <Count />
    <hr/>
    <Student />
  </div>
</template>

<script>
import Count from "@/components/Count";
import Student from "@/components/Student";

export default {
  name: 'App',
  data(){
    return{
    }
  },
  mounted() {},
  methods:{},
  components: {Student, Count}
}
</script>
CodeMonkey-D
关注
  • 21
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vuex模块化demo
08-26
在大型 Vue 项目中，随着组件数量的增长，状态管理变得越来越重要，而Vuex的模块化特性则有助于保持代码的组织性和可维护性。 **1. Vuex 模块化介绍** 在Vuex中，我们可以将不同的状态和操作逻辑分门别类地放入...
vue2:Vue路由器和Vuex
04-13
6. **Vue组件与Vuex的结合**： 通过`mapState`、`mapGetters`、`mapMutations`和`mapActions`辅助函数，可以方便地在组件中映射Vuex的状态和方法，简化代码。 结合Vue Router和Vuex，开发者可以更好地组织和管理...
Vuex 目录结构组织
很酷的站长的博客
12-29 216
store 文件太大时，只需将 action、mutation 和 getter 分割到单独的文件。Vuex 官方目录结构示例 : https://v3.vuex.vuejs.org/zh/guide/structure.html。对于大型应用，官方希望把 Vuex 相关代码分割到模块中。Vuex 并不限制你的代码结构，但是，它规定了一些需要遵守的规则。这是当前我所在公司使用的一种 Vuex 目录结构组织方式。是更改状态的唯一方法，并且这个过程是同步的。2. Vuex 目录结构示例【官方】
Vuex Store全方位指南：从目录结构、模块化设计，到Modules、state、mutations、actions、getters核心概念最佳实践及全面测试策略
JINGWHALE
06-20 393
本文全方位介绍了Vuex Store 安装，目录结构、模块化设计，Modules、state、mutations、actions、getters核心概念最佳实践，以及全面测试策略最佳实践与示例。Vuex Store是Vue.js框架的核心状态管理器，充当应用程序的中央数据存储，实现组件间状态的一致性和可追踪性。Vuex测试则至关重要，它不仅验证了状态管理逻辑的准确性，防止回归错误，还增强了代码的可维护性和团队协作效率，是提升应用健壮性和开发流程成熟度的基石。
【Vue】Vuex 模块的基础使用--命名空间
DomCode
10-22 4975
我们在使用Vue开发项目时，如果项目比较复杂的话，使用Vuex进行状态管理会大大简化开发难度，提高开发效率。但是当使用Vuex的一些复杂功能（如：模块、命名空间）时，Vuex会变的稍微有些复杂。再加上Vuex的灵活性，同样的功能可以有很多种实现方式。因为太灵活、实现方式太多，导致经常会记混掉。所以就整理了一下Vuex的几种常用的使用方式以实例作个对比。真正实现拿来主义精神，方便后期开始使用。...
（四十一）Vuex之模块化与命名空间
忆亦何为的博客
06-17 1147
在 Vuex 模块中，默认情况下，mutation、action 和 getter 的名称是全局的，即它们在整个应用中是唯一的。模块重用允许你在多个地方注册相同的模块，以便在不同的上下文中共享模块的状态和功能。，即可启用命名空间。要实现模块重用，你可以在 Vuex 的模块定义中使用工厂函数，该函数返回模块对象，以便可以在不同的地方多次调用。来创建多个模块实例，通过模块重用，能够提高代码的可维护性和重用性，减少重复的代码和逻辑。，用于指定模块在 state 树中的位置，module 是一个包含模块的对象。
Vuex模块化以及命名空间namespaced的使用
青春木鱼的博客
12-21 1635
命名空间的作用是为了减少模块之间定义的方法命名冲突的问题。默认state是局部命名空间 ，mutation、action、getter 是全局命名空间。比如说在a模块getter 中定义一个getter1，在b模块getter 中也定义一个getter1 ,在同一空间内，拥有两个相同的名称，程序会报错。
Web前端 ---- 【Vue】Vuex的使用(辅助函数、模块化开发)
weixin_68854196的博客
12-08 3070
vuex一文详解
vue2 vuex模块化设计
qq_44886882的博客
08-25 698
为了方便vuex使用，简单进行vuex的模块化设计，这里仅仅针对vue2，vue3有更简单的pinia，本身就是按照模块化进行的设计，因此不讨论。
【Vue2】Vuex 的使用
Superman_H的博客
02-10 6909
# Vuex 简介 Vuex 是官方提供的一个插件，用于集中式管理组件共用的数据。使用 Vuex 后，任何组件之间都可以进行通信。Vuex 的数据存储是响应式的，当组件从 store 中获取并改变数据时，模版会被重新渲染。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/bd75e31c2a1e4ac99b8a400a0523da92.png#pic_center) 1. State (状态)：用于存储数据。存储的数据供 Vue Components 使用
vue2中Vuex的基本使用
m0_58882768的博客
01-27 523
2.在store中配置actives,actives主要写业务逻辑，将数据commit给mutations进行操作。store实例对象是由Vuex.store({})构造出来的，构造之后，在vc,vm上就会出现$store属性。vuex中一般存储组件之间共享的数据，适用于多组件共享某些数据，将这些共享的数据集中起来管理。5.getters 就是将state中的数据进行运算加工，类似与组件中的computed。vuex中数据都是响应式的，能够保持数据与页面的同步，数据改变重新解析模板。
十一：Vuex，getters，mapState，mapGetters，mapActions，mapMutations，多组件共享数据，vuex模块化
qq_45994446的博客
10-10 216
vuex在Vue中实现集中式状态（数据）管理的一个vue插件，集中式就像一个老师给一群学生上课，状态就是数据；vuex对vue应用中多个组件的共享数据进行集中式的管理（读、写），适用于任意组件间通信多个组件依赖于同一状态时；来自不同组件的行为需要变更同一状态（数据）
详解如何在vue-cli中使用vuex
12-09
Vue CLI则是Vue.js的官方脚手架工具，它简化了项目的初始化和配置过程，包括Webpack的配置。在使用Vue CLI创建项目时，结合Vuex可以让我们的开发工作更加高效。 首先，创建一个基于Vue CLI的新项目，例如命名为...
vue项目：以vue-cli3.0为基础，iview3.0为组件库，结合vue-router，vuex，axios组件库构建一个工程化前端
02-05
Vuex 是 Vue.js 的状态管理库，版本 3.0 强化了模块化的概念，让大型应用的状态管理变得更为有序。在这个项目中，Vuex 被用来集中管理全局状态，确保组件间数据的一致性，通过 mutations、actions 和 getters 进行...
vuetinize:使用Vue.js 2，Vuex和Vuetify创建的Todo移动应用
04-19
2. **Vuex**：Vuex是Vue.js的应用状态管理工具，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 3. **Vuetify组件**：Vuetify包含各种UI组件，如按钮、卡片、表单...
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 870
本文介绍了电子签名、图片合成、及预览功能
unplugin-vue-components 的作用是什么
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 375
总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。
【Vue】全局组件和局部组件
最新发布
wosixiaokeai的博客
07-27 413
全局组件是在整个Vue应用中都可以使用的组件。它们被注册在Vue的根实例上，因此可以在任何子组件的模板中被引用，而无需在每个组件中重复注册。
"Git操作与Vue基础及Vuex使用
本文总结了Git操作、Vue的基本使用、Vue组件化、以及Vuex的使用。首先介绍了Git的安装配置和基本操作，包括在Windows平台上的安装和下载步骤，以及熟悉Git的工作流程和参数。接着详细介绍了Vue的基本使用，包括Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CodeMonkey-D

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值