[vue]多组件共享数据与vuex模块化

最新推荐文章于 2024-05-20 15:40:00 发布
最新推荐文章于 2024-05-20 15:40:00 发布
阅读量805 收藏
点赞数
分类专栏： Vue 学习笔记 文章标签： vue.js 前端 javascript 前端框架 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53022813/article/details/127454930
版权

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

1. 多组件共享数据案例

1.1 实现效果

在这里插入图片描述

1.2 代码实现

store/index.js

// 该文件用于创建 vuex 中最为核心的 store

// 引入 vue
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex'

// 使用 vuex
Vue.use(Vuex)

// 准备 actions 用于响应组件中的动作
const actions = {
  // 等一等再加
  incrementWait(context, value) {
    console.log('actions 中的 incrementWait 被触发', context, value)
    setTimeout(() => {
      context.commit('INCREMENTWAIT', value)
    }, 500);
  },
  // 当前求和为奇数再加
  incrementOdd(context, value) {
    console.log('actions 中的 incrementOdd 被触发', context, value)
    if (context.state.sum % 2) {
      context.commit('INCREMENTODD', value)
    }
  }
}
// 准备 mutations 用于操作数据 state
const mutations = {
  // 加法
  INCREMENT(store, value) {
    console.log('mutations 中的 INCREMENT 被触发', store, value)
    store.sum += value
  },
  // 减法
  DECREMENT(store, value) {
    console.log('mutations 中的 DECREMENT 被触发', store, value)
    store.sum -= value
  },
  // 等一等再加
  INCREMENTWAIT(store, value) {
    console.log('mutations 中的 INCREMENTWAIT 被触发', store, value)
    store.sum += value
  },
  // 当前求和为奇数再加
  INCREMENTODD(store, value) {
    console.log('mutations 中的 INCREMENTODD 被触发', store, value)
    store.sum += value
  },
  // 添加人员
  ADD_PERSON(state, person) {
    state.personList.unshift(person)
  }
}
// 准备 state 用于存储数据
const state = {
  // 当前求和
  sum: 0,
  school: 'SGG',
  subject: '前端',
  personList: [
    {id: '001', name: '张三'}
  ]
}

// getters 
const getters = {
  // 会有一个参数 state
  // 获取当前求和放大十倍后的值
  bigSum(state) {
    return state.sum * 10
  }
}

// 创建并导出 store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})

main.js

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

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

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

App.vue

<template>
  <div>
    <!-- 使用子组件 -->
    <Count></Count>
    <hr>
    <Person></Person>
  </div>
</template>

<script>
// 导入子组件
import Count from './components/Count.vue'
import Person from './components/Person.vue'

export default {
  name: 'App',
  // 注册子组件
  components: {
    Count,
    Person
  }
}
</script>

Count.vue

<template>
  <div>
    <h1>当前求和为: {{sum}}</h1>
    <h1>当前求和放大10倍为: {{bigSum}}</h1>
    <h1>学校: {{school}}</h1>
    <h1>学科: {{subject}}</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="incrementWait(n)">等一等再加</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <h3>Person组件的总人数为: {{personList.length}}</h3>
  </div>
</template>

<script>
// 导入 mapState mapGetters
import { mapState, mapGetters } from 'vuex'
// 引入 mapMutations
import { mapMutations, mapActions } from 'vuex'

export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    // 借助mapState生成计算属性，从state中读取数据。（数组写法）
    ...mapState(['sum', 'school', 'subject', 'personList']),
    //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    ...mapGetters(['bigSum'])
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
    ...mapMutations(['INCREMENT', 'DECREMENT']),
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
    ...mapActions(['incrementWait', 'incrementOdd'])
  }
}
</script>

<style>
button {
  margin: 5px;
}

h3 {
  color: brown;
}
</style>

Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <input type="text" placeholder="请输入姓名" v-model="name">
    <button @click="addPerson">添加</button>
    <ul>
      <li v-for="person in personList" :key="person.id">{{person.name}}</li>
    </ul>
    <h3>Count组件求和为: {{sum}}</h3>
  </div>
</template>

<script>
// 导入 mapState mapMutations
import {mapState, mapMutations} from 'vuex'
// 导入 nanoid 用于 id 的生成
import {nanoid} from 'nanoid'

export default {
  name: 'Person',
  data() {
    return {
      name: ''
    }
  },
  computed: {
    ...mapState(['personList', 'sum'])
  },
  methods: {
    addPerson() {
      const person = {
        id: nanoid(),
        name: this.name
      }
      this.ADD_PERSON(person)
      this.name = ''
    },
    ...mapMutations(['ADD_PERSON'])
  }
}
</script>

<style>

</style>

在这里插入图片描述

2. vuex 模块化

vuex 模块化是将 vuex 中 actions、mutations、state、getters 中的数据和方法根据功能进行拆分。即和同一个功能相关的 actions、mutations、state、getters 放在一起。

2.1 vuex 模块化拆分

store/index.js

// 该文件用于创建 vuex 中最为核心的 store

// 引入 vue
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex'

// 使用 vuex
Vue.use(Vuex)

// 和计算相关的配置项
const acountOptions = {
  actions: {
    // 等一等再加
    incrementWait(context, value) {
      console.log('actions 中的 incrementWait 被触发', context, value)
      setTimeout(() => {
        context.commit('INCREMENTWAIT', value)
      }, 500);
    },
    // 当前求和为奇数再加
    incrementOdd(context, value) {
      console.log('actions 中的 incrementOdd 被触发', context, value)
      if (context.state.sum % 2) {
        context.commit('INCREMENTODD', value)
      }
    }
  },
  mutations: {
    // 加法
    INCREMENT(store, value) {
      console.log('mutations 中的 INCREMENT 被触发', store, value)
      store.sum += value
    },
    // 减法
    DECREMENT(store, value) {
      console.log('mutations 中的 DECREMENT 被触发', store, value)
      store.sum -= value
    },
    // 等一等再加
    INCREMENTWAIT(store, value) {
      console.log('mutations 中的 INCREMENTWAIT 被触发', store, value)
      store.sum += value
    },
    // 当前求和为奇数再加
    INCREMENTODD(store, value) {
      console.log('mutations 中的 INCREMENTODD 被触发', store, value)
      store.sum += value
    },
  },
  state: {
    sum: 0,
    school: 'SGG',
    subject: '前端',
  },
  getters: {
    bigSum(state) {
      return state.sum * 10
    }
  }
}

// 和人员相关的配置项
const personOptions = {
  actions: {},
  mutations: {
    // 添加人员
    ADD_PERSON(state, person) {
      state.personList.unshift(person)
    }
  },
  state: {
    personList: [
      { id: '001', name: '张三' }
    ]
  },
  getters: {}
}

2.2 使用模块化后的配置项

创建store实例对象时，使用模块化后的配置项，模块化后的配置项需要写在store的modules配置项中。

store/index.js

// 创建并导出 store
export default new Vuex.Store({
  modules: {
    acount: acountOptions,
    person: personOptions
  }
})

2.2 开启命名空间

// 配置项开启命名空间
namespaced: true,

store/index.js

// 和计算相关的配置项
const acountOptions = {
  namespaced: true,
  actions: {
    ......
  },
  mutations: {
    ......
  },
  state: {
    ......
  },
  getters: {
    ......
  }
}

// 和人员相关的配置项
const personOptions = {
  namespaced: true,
  actions: {},
  mutations: {
    ......
  },
  state: {
    ......
  },
  getters: {}
}

2.3 模块化后读取数据和方法

vuex 模块化使用 mapState、mapGetters、mapMutations、mapActions 读取数据和获取相应的方法，需要在数组和对象前面先传入一个参数，该参数为数据和方法对应所在的命名空间。

Count.vue

<template>
  <div>
    <h1>当前求和为: {{sum}}</h1>
    <h1>当前求和放大10倍为: {{bigSum}}</h1>
    <h1>学校: {{school}}</h1>
    <h1>学科: {{subject}}</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="incrementWait(n)">等一等再加</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <h3>Person组件的总人数为: {{personList.length}}</h3>
  </div>
</template>

<script>
// 导入 mapState mapGetters
import { mapState, mapGetters } from 'vuex'
// 引入 mapMutations
import { mapMutations, mapActions } from 'vuex'

export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    // 借助mapState生成计算属性，从state中读取数据。（数组写法）
    ...mapState('acount',['sum', 'school', 'subject']),
    ...mapState('person',['personList']),
    //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    ...mapGetters('acount',['bigSum'])
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
    ...mapMutations('acount',['INCREMENT', 'DECREMENT']),
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
    ...mapActions('acount',['incrementWait', 'incrementOdd'])
  }
}
</script>

<style>
button {
  margin: 5px;
}

h3 {
  color: brown;
}
</style>

Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <input type="text" placeholder="请输入姓名" v-model="name">
    <button @click="addPerson">添加</button>
    <ul>
      <li v-for="person in personList" :key="person.id">{{person.name}}</li>
    </ul>
    <h3>Count组件求和为: {{sum}}</h3>
  </div>
</template>

<script>
// 导入 mapState mapMutations
import {mapState, mapMutations} from 'vuex'
// 导入 nanoid 用于 id 的生成
import {nanoid} from 'nanoid'

export default {
  name: 'Person',
  data() {
    return {
      name: ''
    }
  },
  computed: {
    ...mapState('acount',['sum']),
    ...mapState('person',['personList'])
  },
  methods: {
    addPerson() {
      const person = {
        id: nanoid(),
        name: this.name
      }
      this.ADD_PERSON(person)
      this.name = ''
    },
    ...mapMutations('person', ['ADD_PERSON'])
  }
}
</script>

<style>

</style>

在这里插入图片描述

3. 总结 多组件共享数据与vuex模块化

3.1. 目的

让代码更好维护，让多种数据分类更加明确。

3.2. 修改store.js

   const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })

3.3 开启命名空间后，组件中读取state数据

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),

3.4. 开启命名空间后，组件中读取getters数据：

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])

3.5. 开启命名空间后，组件中调用dispatch

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

3.6. 开启命名空间后，组件中调用commit

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
小炜1128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多頁面共享sessionStorage並同步至vuex範例
08-09
多頁面共享sessionStorage並同步至vuex - 範例
Vue.js中使用Vuex实现组件数据共享案例
10-15
Vuex是一个专为Vue.js设计的状态管理库，它提供了一种集中式的存储机制，使得多个组件能够安全地共享和修改状态。本篇文章将深入讲解如何在Vue.js中使用Vuex来实现组件之间的数据共享。 首先，安装Vuex。在Vue CLI ...
Vue组件之间的数据共享
weixin_49827467的博客
06-20 813
学习目标：1、Vue组件的数据共享2、Vue中 ref 的 引用。
Vue3 实现共享数据三种方式
ing的博客
05-20 485
在vue3中，组件和响应式功能被隔离开了，也就是说在任意一个JavaScript文件中都可以使用响应式功能。在这里遇到了一个问题，就是需要使用createStore方法创建store实例，这样在应用模块的情况下是不生效的。注意：在vue3中，由于没有了this，所以需要使用引入useStore方法，来获取store实例。在vuex@4.x中 创建vuex实例需要使用createStore方法。配置，可以让开发者在高层组件中注入数据，然后在后代组件中使用。考虑到有些数据需要在整个vue应用中使用，
Vue3实现数据共享
weixin_51422386的博客
02-07 1940
vue3x实现数据共享
Vuex (全局变量管理~~多个页面共享数据)
m0_66468899的博客
09-06 459
vue 实例中定义的method方法中：通过 this.$store.commit('increment'),//注册一个increment的action，并通过context提交个mutations。//写法二：直接书写context对象需要用到的属性或方法。//写法一：直接书写context对象。//注册increment事件。//注册increment事件。//提交mutations。//提交mutations。//提交mutations。
Vue 02- Vue如何实现数据共享
weixin_57519357的博客
09-25 1957
Vue如何实现数据共享。
vuex模块化demo
08-26
**vuex模块化详解** Vuex 是 Vue.js 的一个官方状态管理库，它提供了一种集中式的存储方式来管理组件间的共享状态，并提供了强大的工具来跟踪状态的变化，从而简化复杂应用的状态管理。在大型 Vue 项目中，随着组件...
自定义vue全局组件use使用、vuex的使用详解
08-30
Vuex 是 Vue.js 的一个状态管理库，它提供了一个中心化的存储仓库来管理组件的状态。在 Vuex 中，有四个核心概念：state（状态）、mutations（状态变更）、actions（异步操作）和 getters（状态的计算属性）。 - **...
详解vue组件化开发-vuex状态管理库
08-30
## Vue组件化开发与Vuex状态管理库 在Vue.js应用开发中，组件化是一种常见的设计模式，它允许我们将应用程序拆分为独立的、可复用的组件。然而，随着应用规模的扩大，组件之间的状态管理和通信会变得复杂。这时，...
Vue-router 类似Vuex实现组件化开发的示例
08-29
Vue-router的这种组件化路由方式类似于Vuex的模块化状态管理。在Vuex中，可以将状态、mutation、action等拆分为多个模块，每个模块包含自己独立的状态和操作。同样，Vue-router的路由配置也可以拆分成多个文件，每个...
Vuex_多组件共享数据
小白的成长之路
04-04 81
Vuex实现多组件数据共享的方法
Vue实战问题 如何处理多个组件依赖同一个接口数据？
FE_Ryan的博客
11-18 620
思路：在页面初始化的时候，逐个异步请求那些多个地方用到的数据，然后数据挂载到state上，用到的地方只需要mapState对应的key值（如果vuex太重，可以使用vue2.6的observable维护一份js数据源）如果我们能够在【当某个变量被get的时候，做出处理，如果变量值为空，去异步获取，反之，直接返回该变量值，并且依赖到的地方自动更新呢】思路：通过遍历拦截state每个键的get、set，当第一次get的时候没有数据，去异步获取，反之，直接返回数据；如有以上的问题，有解决思路可以给出合适的方案。
vuex不同页面的数据共享以及辅助函数mapActions
qq_56715703的博客
03-11 603
（仅代表个人想法，如有错误请指出）：当第一个页面把数据放到state中，因为Vue实例中的$store是全局的，相当于一个仓库，存储了state的属性名和属性值，就可以在任意位置的文件下将state中的数据取出来。changeName，修改的name值为‘安欣’，changeAge，修改的age值为40。格式： changeName是页面布局中的方法名，nameActions为js页面中与之对应的方法名。此时，就能实现Box1页面的值传到Box2页面中，Box2的值也可以同步到Box1中。
vue多组件之间共享（vuex）
qq_63656102的博客
04-22 324
我们的目的就是通过vuex来实现两个不同组件的按钮都可以获得对数据1的修改和获取：
vuex中的this.$store.commit和dispatch()使用
coinisi_li的博客
09-09 6533
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况，我们可以用熟悉的props 或者 $emit 等方式进行父子组件通信，但是，在项目稍微大一点的情况中，面对众多的不相关的平行组件，并且很多数据需要多个组件循环使用，这个时候在这些组件间传递数据，使用上述方法会比较麻烦，项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 为了解决这一问题，我们需要使用Vue 的状态管理工具Vuex
Vue学习笔记（七）
qq_27144571的博客
02-19 3426
Vuex 1.vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可能预测的方式发生变化；Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能。 2.理解状态管理模式、集中式存储管理：将状态看作变量，前面两个名词的作用就是把多个组件需要共享的变量全部存储到一个对象里面；然后将这个对象放在顶层的Vue实例中，让其他组件可以使用；这样多个
【vue2】按需引入多个组件的写法
bbt953的博客
08-19 441
按需引入多个组件的写法
Vue2（十二）：Vuex环境搭建、Vuex工作原理、几个配置项、多组件共享数据、Vuex模块化
weixin_42044763的博客
08-31 2271
安装： 注意Vue2一定要安装vuex3，如果是vue3可以直接安装的是vuex4，可以去文件里看下vue的版本是啥，千万别输错了，不然会陷入痛苦的报错……创建文件： 在此文件中引入插件并使用vuex插件，使用vuex插件必须在引入store之前，如果在main.js中引入和使用vuex的话，由于js文件里所有的import语句都会提升到最开始执行，所以会报错滴。总结：引入store必须在之后 3.main.js引入store JS执行的时候会把import提升到顶部，与摆放顺序无关，如果放在main.js
vuex 模块化数据获取vuex4.0
最新发布
06-22
Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式，它提供了一种集中存储和管理应用组件共享状态的方式。在Vuex 4.0中，模块化是核心特性之一，使得状态划分更加清晰，易于管理和维护。 模块化数据获取主要有以下几个步骤： 1. **创建模块**（Modules）：在 Vuex 中，你可以将状态、getter、action 和 mutations 分离到不同的模块（modules）里。每个模块是一个对象，包含了这些状态管理相关的属性。 ```javascript export const userModule = { state: { userName: '' }, getters: { getUserInfo: state => state.userName }, actions: { setUser: ({ commit }, username) => commit('SET_USER', username) }, mutations: { SET_USER: (state, username) => (state.userName = username) } }; ``` 2. **导入模块**：在需要使用模块的地方，通过 `import` 引入，并在 store 中使用 `module.exports` 注册模块。 ```javascript import userModule from './modules/user' export default new Vuex.Store({ modules: { user: userModule } }) ``` 3. **使用模块**：在组件中通过 `mapState`, `mapGetters`, `mapActions`, 和 `mapMutations` 函数，访问和操作模块内的状态和方法。 ```javascript computed: { ...mapGetters(['getUserInfo']) }, methods: { async updateUser() { await this.$store.dispatch('user.setUser', 'New User'); } } ``` 4. **命名空间**：为了防止命名冲突，可以使用命名空间来组织模块，如 `auth` 或 `settings`。 ```javascript export const authModule = { // ... } // 在 store 中导入 import auth from './modules/auth' modules: { auth: auth, // ... } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值