多组件状态共享-vuex

最新推荐文章于 2023-04-22 15:42:20 发布
最新推荐文章于 2023-04-22 15:42:20 发布
阅读量408 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html5xiaoxiao/article/details/107780946
版权

Vuex

  1. 什么是Vuex?
    • Vuex是vue的一个状态管理工具，用于存储管理项目中的 state
  2. 什么是状态管理模拟呢？
    • 用 state 控制 视图，这种管理模式就是状态管理
    • 好处：
      • 我们的关注点在 state
  3. 什么是状态 state?
    • 用数据控制视图，这个数据我们称之为 状态
  4. Vuex什么情景下使用？
    • 当你看到或者接到项目就知道了，难就用，简单就不用
    • 当我们的项目中数据操作频繁、数据通信量大,我们需要使用vuex
  5. Vue构成部分
    • state 数据
    • actions 创建动作【用户交互】 ----- 注意： 这一部分可能不写
      • 后端数据交互可以写在actions
    • mutations 修改state的

官方给出的关系图展示
在这里插入图片描述

  1. vuex 流程 Flow
    - 单案例：
    - 即将要做项目，里面有功能，提前准备好的
    - 演示
    - 项目中使用流程：
    - 数据分块
    - 数据请求封装
    - 数据请求提前写好的

单案例：

1.state->actions->mutations - 存在actions的情况下
./src/store/index.js - 状态管理文件

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex) //激活插件

//! 打造仓库 -> 实例对象
const store=new Vuex.Store({
    state:{
        count:0 // 初始化数据
    },
    actions:{
        // 用于创建动作的方法
        increment({commit}){ //这个参数就是store,对他进行解构
            // 动作的创建
            const action={
                type:'INCREMENT'// 动作的类型，一般用常量来表示
            }
            commit(action) //将动作发给mutations
        },
        decrement({commit}){ 
            const action={
                type:'DECREMENT'
            }
            commit(action) 
        },
    },
    mutations:{
        // 用于修改数据的方法
        INCREMENT(state,action){//动作的类型作为方法名
            // state就是 数据
            // action就是actions中发过来的动作
            state.count++
        },
        DECREMENT(state,action){
            state.count--
        },
    }
})
export default store

main.js - 入口文件

import store from './store'

new Vue({
  store,// 入口文件中，通过store选项注册store实例，这样每一个组件就会得到一个 $store的属性
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div> 
    <!-- <p>{{this.$store.state.count}}</p> -->
    <p>{{n}}</p>
    <!-- <button @click="add">+</button> -->
    <button @click='increment'>+</button>
    <button @click='decrement'>-</button>
  </div>
</template>

<script>
//方案一：通过辅助工具来连接actions
import {mapActions,mapState} from 'vuex'
//mapActions是一个函数，接受一个数组作为参数，它的返回值是一个对象
export default{
  name:'App',
  //为什么数据放在computed中而不是data中，因为data中放的是初始化数据
  computed:{
    ...mapState({
      n:state=>state.count
    })
  },
  methods:{
    ...mapActions(['increment','decrement']),
    //先说下为什么下面的方法不好，数据和方法都给store管，为什么自己还要自定义一个方法，多此一举
    add(){ // 方案二：不使用辅助工具用法
      this.$store.dispatch('increment')//用dispatch来连接组件->actions
      // console.log(this.$store)
    }
  },
  mounted(){
    console.log('this',this)
  }
}
</script>

上述App.vue中两种方式来连接数据：1)有辅助工具 ; 2)不用辅助工具
推荐使用辅助工具的用法

2.State -> mutations 跳过actions的情况
区别文件 App.vue

<template>
  <div>
    <p>{{n}}</p>
    <button @click="INCREMENT">+</button>
    <button @click="DECREMENT">-</button>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  name:'App',
  computed:{
    ...mapState({
      n:state=>state.count
    })
  },
  methods:{
    ...mapMutations(['INCREMENT','DECREMENT'])
  }
}
</script>

分析：如果我们直接将项目中的所有state/actions/mutations全放在一起
- 坏处：
1. 杂乱，文件也比较大
2. 维护，更新不方便
- 解决：
1. 如果一个类型的数据做成一个数据包，那就好
2. 数据分块

项目中使用流程

一、数据分块
./store/index.js

import Vuex from 'vuex'
import Vue from 'vue'
import homeStore from '../pages/home/store'
import userStore from '../pages/user/store'
Vue.use(Vuex)//激活插件

export default new Vuex.Store({
    //数据分块
    modules:{
        //虽然分了不同类别的对象，但是还是在同一个文件夹里
        //将对象放到外面去，做成一个单独的模块，将对象放在store.js里,一个文件夹一个组件+一个状态管理
        //在模块化里，单个文件具备单个功能
        homeStore,
        userStore,
    }
})

./pages/home/store.js - 状态管理文件

export default{
    namespaced:'homeStore',//命名空间，给数据包起了一个名字
    state:{
        count:0//初始化数据
    },
    actions:{
        increment({commit},playload){
            //playload我们称之为'负载',其实就是参数
            const action={
                type:'INCREMENT',
                playload
            }
            commit(action)
        }
    },
    mutations:{
        INCREMENT(state,action){
            //这里如何拿到组件里的数据? - 传参
            state.count+=Number(action.playload)
        }
    }
}

./pages/home/index.vue - Home组件

<template>
    <div>
        <input type="number" name="" id="" v-model='num'>
        <!-- 传参 -->
        <button @click='increment(num)'> + </button>
        <p>{{n}}</p>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
    name:'Home',
    data(){
        return {
            num:0
        }
    },
    computed:{
        // ...mapState(命名kongjian,{})
        ...mapState('homeStore',{
            n:state=>state.count
        })
    },
    methods:{
        ...mapActions('homeStore',['increment'])
    }
}
</script>

App.vue

<template>
    <div>
        <Home/>
        <!-- User/> -->
    </div>
</template>

<script>
import Home from './pages/home/index'
import User from './pages/user/index'
export default {
    name:'App',
    components:{//注册
        Home
    }
}
</script>

二、带请求的数据分块
./pages/user/store.js - 状态管理文件

import axios from 'axios'

export default{
    namespaced:'userStore',//命名空间，给数据包起了一个名字
    state:{
        userInfo:{}
    },
    actions:{
        //请求在actions里发
        //这里的this指的是这个对象,所以不能使用$http
        getUserInfo({commit}){
            axios.get('http://59.110.226.77:3000/api/user/getInfo',{
                params:{
                    userId:'5e980ee6771cdf43999456b1',
                    token:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InlhbnlhYmluZyIsInBhc3N3b3JkIjoiMTIzIiwiY3RpbWUiOjE1OTY0NDQwNTA4NTgsImlhdCI6MTU5NjQ0NDA1MH0.GfW6NnskSszrIw_8DlARvJRpWRWILO1gEhjl0OCDA1k'
                }
            }).then(res=>{
                // console.log('res',res)
                const action={
                    type:'GET_USER_INFO',
                    playload:res
                }
                commit(action)
            }).catch(error=>Promise.reject(error))
           
        }
    },
    mutations:{//修改数据
        GET_USER_INFO(state,action){
            state.userInfo=action.playload.data.data
        }
    }
}

./pages/user/index.vue - User组件

<template>
    <div>
        <p>username:{{userInfo.username}}</p>
        <p>telphone:{{userInfo.phone}}</p>
    </div>
</template>

<script>
//引入辅助工具来链接state和actions
import {mapState,mapActions} from 'vuex'
export default {
    name:'User',
    computed:{
        ...mapState('userStore',{
            userInfo:state=>state.userInfo
        })  
    },
    methods:{
        ...mapActions('userStore',['getUserInfo'])
    },
    mounted(){//页面一加载完就发请求
        this.getUserInfo()
    }
}
</script>

App.vue同上（一、数据分块）

这里我们考虑的东西就比较多了，我们写好的代码不是只为了出结果即可，要做好性能优化和方便后期维护的
思考：
store.js状态管理文件中，请求的方式需要换怎么办？
请求的路径需要换怎么办？
Axios.get里回调太深，get是回调，then是回调 , commit是回掉，容易回调地狱?
这些都不利于后期维护

------------ 继续操作 -------------
1.封装数据请求
注：将数据请求统一一处封装，便于将来的管理和更新
- utils/request || utils/http || utils/ajax || utils/api

  • utils 公共函数封装库

./utils/request.js

import axios from 'axios'
import {getCookie} from './cookie'
import {baseURL} from '../services/baseURL'
//1.创建axios 自定义实例
const ins=axios.create({
    baseURL,//这个值是多样的，因为会在很多环境下进行操作测试
    timeout:4000,//连接超时
})
//2.设置拦截器
ins.interceptors.request.use(function(config){//配置项
    //1.loading
    //2.token 统一携带
    //token从cookie中取 
    //这句话使用是有条件的，看接口文档是要统一携带，还是单个
    // config.Headers.authToken=getCookie('token')//令牌一般都携带在请求头处，但是这里的携带在请求的参数中
    return config
},function(error){
    return Promise.reject(error)
})
ins.interceptors.response.use(function(res){//配置项
    return res
},function(error){
    return Promise.reject(error)
})
//3.发请求
export default function request(options){
    //对参数进行解构
    const {//设置默认参数
        url,
        method='get',
        data,
        headers={
        "Content-Type":"application/x-www-form-urlencoded",
        },
    }=options;
    switch(method.toUpperCase()){//判断请求方式
        case 'GET':
            return ins.get(url,{params:data});
            break;
        case 'POST':
            switch(headers['Content-Type']){
                case 'application/json':
                    return ins.post(url,data,{headers});
                    break;
                case 'application/x-www-form-urlencoded':
                    const p=new URLSearchParams();
                    for(let key in data){
                        p.append(key,data[key])
                    }
                    return ins.post(url,p,{headers})
                    break;
                case 'mutilpart/form-data':
                    const param=new FormData();
                    for(let key in data){
                        param.append(key,data[key])
                    }
                    return ins.post(url,param,{headers})
                    break;
            }
            break;  
        case 'PATCH':
            return ins.patch(url,data);
            break;  
        case 'PUT':
            return ins.put(url,data);
            break;  
        case 'DELETE':
            return ins.delete(url,{data});//配置项
            break; 
        default:
            return ins(options);
            break; 
    }
}

提取token需要从cookie中提取，封装cookie.js
./utils.cookie.js

export function getCookie(key){
    if (document.cookie) { // 判断是否有cookie
        let arr = document.cookie.split('; '); // 拆分所有cookie 
        for (let i = 0; i < arr.length; i++) {
            let item = arr[i].split('='); // 将cookie数据拆分成 key value
            // 通过key  查找value
            if (item[0] === key) return item[1]; // 找到key  返回value
        }
        return ''; // 如果循环结束 都没有 则返回空字符串
    }
}
export function setCookie(key, value, day){
    if (typeof day === 'number') {
        let d = new Date();
        d.setDate(d.getDate() + day);
        document.cookie = `${key}=${value};expires=${d};path=/`;
    } else {
        document.cookie = `${key}=${value};path=/`;
    }
}

./services/baseURL.js - 将来可能用到的请求路径都写在这个模块中

//项目使用环境： 开发  测试  生产   Bata  RC  Online 
export  const baseURL='http://59.110.226.77:3000';//开发
// export const baseURL = 'http://59.110.226.77:8000' // 生产
// export const baseURL = 'http://43.100.35.99:8000' // test
// export const baseURL = 'http://59.110.226.77:8000' // Bata
// export const baseURL = 'http://59.110.226.77:8000' // RC
// export const baseURL = 'http://59.110.226.77:8000' // Online

./services/index.js - 目的：为了防止回调太深，提前先将请求写好

// user相关
import request from '../utils/request'
import {getCookie} from '../utils/cookie'
// 获取用户信息接口
export default function getUserInfoReq(){
    // retrurn返回值就是promise
    //因为request返回的ins===axios返回的是一个promise
    return request(({
        url:'/api/user/getInfo',
        data:{
            userId:getCookie('userId'),
            token:getCookie('token')
        }
    }))
}

./user/store.js - 优化后的写法
actions部分进行修改

actions:{
        // ! 这里进行数据请求封装方法
        //优化过后的写法
        async getUserInfo({commit}){
            const action={
                type:'GET_USER_INFO',
                playload:await getUserInfoReq()//请求得到的结果，是个异步
            };
            commit(action)
        }
    },

项目文件夹根据个人喜好来定
在这里插入图片描述

Eason ZhangF
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue组件化开发-vuex状态管理库
08-30
## Vue组件化开发与Vuex状态管理库 在Vue.js应用开发中，组件化是一种常见的设计模式，它允许我们将应用程序拆分为独立的、可复用的组件。然而，随着应用规模的扩大，组件之间的状态管理和通信会变得复杂。这时，...
浅谈super-vuex使用体验
08-27
Vuex 是一个常用的状态管理工具，但是在实际应用中存在一些问题，如数据共享、业务接口分离、数据模块化管理等。Super-Vuex 正是为了解决这些问题而生的。 一、状态模块化 在 Vuex 中，我们通常使用单一状态树来...
vue多组件之间共享（vuex）
qq_63656102的博客
04-22 323
我们的目的就是通过vuex来实现两个不同组件的按钮都可以获得对数据1的修改和获取：
Vue组件间的数据共享（父子，兄弟，后代，全局事件总线，Vuex）
切图仔
04-21 4554
Vue组件间的数据共享（父子，兄弟，后代，Vuex）
vue中多组件状态共享的两种方法
qq_27667337的博客
06-12 3283
一、vuex（较大项目） 使用方法：占坑，网上很多 二、Observable API 随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数...
Vue组件之间的数据共享详解
zxdznyy的博客
10-10 1103
组件之间的关系有父子关系与兄弟关系，在项目中，经常会遇到组件之间数据共享的问题。本篇博客针对此问题进行讲解，希望能对读者有帮助！我们先前已经介绍了父子组件的数据传递方式。其中，父组件给子组件传递数据，需要借助props，而子组件给父组件传递数据，需要借助自定义事件$.emit()，而兄弟组件之间传递数据的方式则需要借助EventBus。通俗来说，EventBus是一个vue实例，是平行组件的沟通桥梁。这个文件也是兄弟组件进行数据传递核心，同时，两个兄弟组件都需要引入这个js文件。
vue组件之间的数据共享
热门推荐
黄钢的博客
10-10 2万+
前期写项目时，无论项目大小，都是用的vuex来实现的数据共享，随着学习的深入，发现使用vuex有点大材小用了。一般情况下，vuex适合大型项目、组件结构复杂的项目实现数据共享，vuex无视组件的父子、兄弟关系，只要在store中进行了注册，所有的组件都可以共享，但是也会存在一些问题，比如刷新页面会导致一些信息丢失的问题，虽然能解决，但也挺麻烦。通过学习，了解了更简单的组件间传递数据的方法，记录一下。
mini-vuex模拟VUEX实现
05-23
Vuex 是 Vue 生态系统中的状态管理库，它提供了一种集中式的存储方式来管理组件间的共享状态，使得状态管理更加有序和可预测。在本项目 "mini-vuex" 中，我们将探讨如何通过简单的代码实现一个迷你版的 Vuex，以便于...
vue--vuex详解
10-17
Vuex 提供了一种结构化的状态管理方式，使得在组件之间共享和传递数据更加有序和可控。 首先，为什么需要使用 Vuex？在 Vue.js 中，组件间的通信通常是通过 props 实现的，但这种方式仅限于父子组件间的单向数据流...
vue全家桶_vuex共享状态(数据)管理
qq_43260366的博客
09-15 509
注：虽然我们可以通过this.$store.state获取到vuex中的数据，但是一般建议使用getters获取(原因是因为getters。[2]使用mutations里面的方法同步修改数据。[3]使用actions异步修改state中的数据。vuex中getters本质就是vuex的计算属性。[2]使用getters获取仓库中的数据。[1]直接通过点语法修改仓库里面的数据。[1]直接通过点语法获取仓库中的数据。注：vuex中的数据是存储在。作用:获取state中的数据。获取state中的数据。
使用watch在微信小程序中实现全局状态共享
10-16
主要给大家介绍了关于如何使用watch在小程序中实现全局状态共享的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vuex如何实现数据共享
m0_70314224的博客
09-25 595
概念在Vue中实现（数据）的一个Vue，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。当多个组件需要数据共享的时候，我们就可以使用Vuex。其实Vuex就是为了实现多组件数据共享，从而建立一个叫store的数据管理库，将需要共享的数据存放在里面，在需要的地方可以取出来作为初始数据，也可以在组件内通过dispatch或者提交commit方法来改变该原始数据状态，从而实现的data的共享。
Vue2.x经典后台管理系统案例讲解
09-29
【超实用课程内容】 通过对一个经典后台管理页面的创建和增删查改内容的讲解，把vuejs框架的关键知识点都穿插讲到。 包括如何搭建环境，vuejs常用指令，使用ElementUI快速搭建页面，各类表单的创建和验证，vue组件使用，数据传递的各种方式，前端如何模拟数据，以及如何与后端接口联调等等。 为了让大家能构造出一个规范、安全的前端系统，课程的最后还介绍了防xss攻击的一些注意事项和代码规范等内容。 【课程如何观看？】 PC端：https://edu.csdn.net/course/detail/26277 移动端：CSDN 学院APP 本课程为录播课，课程永久有效观看时长，但是大家可以抓紧时间学习后一起讨论哦~ 课件、课程案例代码完全开放给你，你可以根据所学知识，自行修改、优化
vuex 实现vue中多个组件之间数据同步以及数据共享。
weixin_30270561的博客
04-29 1551
http://pan.baidu.com/s/1hrJfpli demo下载地址 前言 　　在一些项目中有很多数据状态之间要实现数据共享状态共享，例如购物车的数据、用户的登录状态等等。vue父元素是可以通过props向子元素传递参数，子元素也可以通用smit向父元素传递参数。但是像购物车这种在项目中多个位置的引用时就会变得很麻烦。例如项目中使用了三个购物车的组件，那么当其中一个组件的值发生改...
Vuex 状态管理模式
weixin_30508241的博客
06-12 250
Vuex 是一个专为 Vue.js 设计的状态管理模式 vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时，会需要： 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状...
【Vuex】Vue中使用Vuex获取多个state状态的4种写法
weixin_44100002的博客
10-09 512
Vue中使用Vuex获取多个state状态的4种写法
vue 当中组件之间共享数据的方式
小鱼儿~同学
02-25 1562
vue当中组件之间共享数据的方式 父向子传值：v-bind 属性绑定 子向父传值：v-on 事件绑定 兄弟组件之间共享数据：EventHBus $emit 发送数据的那个组件 $on 接收数据的那个组件 上面介绍的这三种组件之间的通讯方式，只适合在小范围内来进行数据的共享，如果我们要频繁的、大范围的实现数据的共享，以上三种方式就有点力不从心了 Vuex vuex是实现组件...
小程序学习记录十一:全局数据共享
吮指原味鸡的博客
04-30 234
:全局数据共享一、全局数据共享二、小程序的全局数据共享三、安装MobX相关的包1.安装2.使用 一、全局数据共享 全局数据共享又叫做状态管理，是为了解决组件之间数据工序的问题。开发中常用的全局数据工序方案有：Vuex,Redux,MobX等。 二、小程序的全局数据共享 使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享 mobx-miniprogram用来创建Store实例对象 mobx-miniprogram-bindings用来把Store中的共享
vuex技术多组件共享数据-vuex模块化+namespace
阿牛哥的博客
07-03 385
vuex技术多组件共享数据-vuex模块化+namespace
uniapp开发手机app--vuex结合websocket实现全局消息推送提示
最新发布
11-02
vuex是一种专门用于Vue.js开发的状态管理模式，它可以将组件之间共享的状态集中管理，并且可以实现数据的响应式更新。 在vuex中，我们可以创建一个全局的消息状态，包括未读消息的数量和消息列表。当收到新的消息时...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值