VueX ？？快进来学习学习

最新推荐文章于 2024-08-02 15:55:58 发布
最新推荐文章于 2024-08-02 15:55:58 发布
阅读量482 收藏
点赞数
文章标签： vuex vue.js 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67450855/article/details/126900680
版权

                                                                        文章目录

一、VueX ？

1.1Vuex是什么

1.2Vuex在编码中起到什么作用

 1.3组件传参的方式目前了解到总共有三种

1、子传父 $emit     父传子 props

2、总线传参

3、VueX核心组件

VueX官方图解

个人图解

1.4Vuex分成五个部分(核心组件)

1.5vuex的核心概念：store、state、getters、mutations、actions

二、VueX版本问题及store.js的使用

2.1Vuex使用步骤

1）加载依赖  npm install vuex -S 下载Vuex最新版本的依赖

小编使用的是vuex3.6版本，下载命令npm i -S vuex@3.6.2

2）导入Vuex的4个核心组件，然后通过index.js加载进来

3）将Vuex对应的index.js 挂载到 main.js 的vue实例中

4）测试Vuex的存储变量的功能

三、Vuex中的设置及获取变量值

四、Vuex中的异步同步操作

五、Vuex后台交互

总结

一、VueX ？

1.1Vuex是什么：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作

1.2Vuex在编码中起到什么作用：

解决了前端组件传参的问题，针对当前项目所有的变量进行统一管理。

相比于总线传参优点在于，能够将整个项目的变量进行统一管理

变量传参的演变形式图：

 1.3组件传参的方式目前了解到总共有三种：

1、子传父 $emit     父传子 props

父组件-->子组件，通过子组件的自定义属性：props

子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...);

非父子组件或父子组件：

   通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...)；

   更好的方式是在vue中使用vuex

2、总线传参

3、VueX核心组件

VueX官方图解:

个人图解：

1.4Vuex分成五个部分(核心组件)：

   1.State.js：单一状态树

        获取值  this.$store.state.变量值

   2.Getters.js：状态获取

         获取值  this.$store.getters.变量值的get方法

   3.Mutations.js：触发同步事件

        获取值  this.$store.commit("同步的方法",{...（载荷）})

   4.Actions.js：提交mutation，可以包含异步操作

        获取值  this.$store.dispatch("异步的方法",{...（载荷）})

   5.Module.js：将vuex进行分模块

在vue根实例中定义变量，这个变量也是vue实例，vuex中默认情况下是不允许使用vue实例，想要请求后台接口，必须将vue实例当成参数从组件那一方传递过来

1.5vuex的核心概念：store、state、getters、mutations、actions

  store

      每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

      const store = new Vuex.Store({

       state,    // 共同维护的一个状态，state里面可以是很多个全局状态

       getters,  // 获取数据并渲染

       actions,  // 数据的异步操作

       mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里

      })

二、VueX版本问题及store.js的使用

2.1Vuex使用步骤

1）加载依赖  npm install vuex -S 下载Vuex最新版本的依赖

小编使用的是vuex3.6版本，下载命令npm i -S vuex@3.6.2

 

2）导入Vuex的4个核心组件，然后通过index.js加载进来

 

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })

 export default store

 3）将Vuex对应的index.js 挂载到 main.js 的vue实例中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
/* process.env.MOCK && require('@/mock') */

/* 避免后期打包样式不同，要放在import App from './App'; 之前 */
import ElementUI from 'element-ui' // 新添加 1导入js依赖
import 'element-ui/lib/theme-chalk/index.css' // 新添加 2导入js样式
import App from './App'
import router from './router'
import axios from '@/api/http'//#vue项目对axios的全局配置
import VueAxios from 'vue-axios'
import store from './store'

Vue.use(ElementUI)   // 新添加 3 使用elementui
Vue.use(VueAxios,axios);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  data(){
    return{
      //在vue根实例中定义一个变量，这个变量就是vue实例，它的总线
      //props this.$emit
      Bus:new Vue({})
    }
  },
  components: { App },
  template: '<App/>'
})

4）测试Vuex的存储变量的功能

<template>
  <div>
    <p>欢迎来到{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'VuexPage1',
  data () {
    return {
    }
  },
  computed:{
    msg(){
      //从vuex的state文件中获取值
      return this.$store.state.resName;
    }
  }
}
</script>

<style>
</style>

在 index.js / src/router中导入一下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from "../components/HelloWorld";
import AppMain from "../components/AppMain";
import LeftNav from "../components/LeftNav";
import TopNav from "../components/TopNav";
import Login from "../views/Login";
import Reg from "../views/Reg";
import Articles from "../views/sys/Articles";
import VuexPage1 from "../views/sys/VuexPage1";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/sys/Articles',
          name: 'Articles',
          component: Articles
        },
        {
          path: '/sys/VuexPage1',
          name: 'VuexPage1',
          component: VuexPage1
        }
      ]
    }
  ]
})

启动一下项目，npm run dev 

三、Vuex中的设置及获取变量值

 

export default{
  setResName:(state,payload)=>{
    //state对象就对应了state.js中的对象
    //payload载荷，对应传递的JSON对象参数{name:zs,age:}
    state.resName=payload.resName;
  }
}


export default {
  getResName: (state) => {
    return state.resName;

  }
}

VuexPage1: 

<template>
  <div>
    <p>页面1：欢迎来到{{msg}}</p>
    <button @click="buy">盘它</button>
    <button @click="buyAsync">最终的店长</button>
  </div>
</template>

<script>
  export default {
    name: 'VuexPage1',
    data() {
      return {}
    },
    methods: {
      buy() {
        //通过commit方法 会 调用 mutations.js文件中定义好的方法
        this.$store.commit("setResName", {
          resName: 'KFC'
        })
      }
    },
    computed: {
      msg() {
        //  从vuex的state文件中获取值
        //   return this.$store.state.resName;——>不推荐，不安全
        //  通过getters.js文件获取state.js中定义的变量值
        return this.$store.getters.getResName;
      }
    }
  }
</script>

<style scoped>

</style>

VuexPage2： 

<template>
  <div>
    <p>页面2：欢迎来到{{msg}}</p>
  </div>
</template>

<script>
  export default {
    name: 'VuexPage2',
    data() {
      return {}
    },
    computed: {
      msg() {
        //  从vuex的state文件中获取值
        //   return this.$store.state.resName;——>不推荐，不安全
        //  通过getters.js文件获取state.js中定义的变量值
        return this.$store.getters.getResName;
      }
    }
  }
</script>

<style scoped>

</style>

在 index.js / src/router中导入一下VuexPage2:

 

 

当我们点击盘它，VuexPage2的内容也跟着VuexPage1的内容改变

 

四、Vuex中的异步同步操作

VuexPage1：

<template>
  <div>
    <p>页面1：欢迎来到{{msg}}</p>
    <button @click="buy">盘它</button>
    <button @click="buyAsync">最终的店长</button>
  </div>
</template>

<script>
  export default {
    name: 'VuexPage1',
    data() {
      return {}
    },
    methods: {
      buy() {
        //通过commit方法 会 调用 mutations.js文件中定义好的方法
        this.$store.commit("setResName", {
          resName: 'KFC'
        })
      },
      buyAsync() {
        this.$store.dispatch("setResNameAsync", {
          resName: '麦当劳'
        })
      }
    },
    computed: {
      msg() {
        //  从vuex的state文件中获取值
        //   return this.$store.state.resName;——>不推荐，不安全
        //  通过getters.js文件获取state.js中定义的变量值
        return this.$store.getters.getResName;
      }
    }
  }
</script>

<style scoped>

</style>

actions.js：

export default {
  setResNameAsync:(context,payload)=>{
  // 异步修改值 在异步方法中调用了同步方法
  //  context指的是Vuex的上下文，相当于 this.$store
  // 死代码，6秒后执行
    setTimeout(function (){
      context.commit("setResName",payload);
    },6000);
  }
}

                     

五、Vuex后台交互

actions.js：

export default {
  setResNameAsync:(context,payload)=>{
  // 异步修改值 在异步方法中调用了同步方法
  //  context指的是Vuex的上下文，相当于 this.$store
  // 死代码，6秒后执行
    setTimeout(function (){
      context.commit("setResName",payload);
    },6000);
 
    let _this=payload._this;
    let url=_this.axios.urls.SYSTEM_MENU_TREE;
    _this.axios.post(url,{}).then(r=>{
      console.log(r);
    }).catch(e=>{
 
    });
  }
}

在VuexPage1，添加交互代码 

 

👀👀👀👀👀

 

 后台数据交互成功

总结：

vuex使用步骤：下载 命令：npm install vuex -S(下载最新版本) 

四个核心组件：state.js：存放变量的容器​​​​​​​

                         getters.js：获取变量值

                         mutations.js：同步的方法进行修改

                         actions.js：异步的方法进行修改

                         index.js：整合四个组件，作为vuex的入口

七月472
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex怎么使用？来看看吧~
m0_67094505的博客
09-18 5956
sate.js 存储变量Getters.js 获取变量值、mutations.js 改变变量值（同步）actions.js 改变变量值（异步）
基于ssm+vue数据结构课程网络学习平台.zip
03-27
3. 视频模块：播放教学视频，支持暂停、快进、快退等操作。 4. 习题模块：提供配套习题，支持在线答题和答案解析。 5. 讨论区：用户可以提问、交流学习心得。 6. 教师模块：教师发布课程、更新内容、解答疑问。 在...
你还不知道怎么使用Vuex？赶紧来看看吧！
weixin_65808248的博客
09-14 315
目录一、Vuex的核心组成为什么要学习Vuex呢？因为解决了前端组件传参的问题，针对当前项目所有的变量进行统一管理，可以理解为前端的数据库。组件传参的方式我们目前学习了有两种：1、子传父 $emit 父传子 props2、总线 vue根实例中定义变量，这个变量也是vue实例3、核心组件（第三种）： ①state.js 存储变量 ②Getters.js 获取变量值 ③mutations.js 改变变量值（同步） ④action
Vuex 4与状态管理实战指南
06-06 1255
这篇文章介绍了使用Vuex进行Vue应用状态管理的最佳实践，包括为何需要状态管理，Vuex的核心概念如store、actions、mutations和getters，以及如何处理异步操作和模块化组织状态。虽然Vuex是为Vue设计的，但理论上也可以在React应用中使用。Vuex与Vue的关系是互补的，Vue负责视图层的渲染，而Vuex则负责管理应用的状态。在实际开发中，推荐使用每个框架对应的状态管理解决方案，例如在React中使用Redux，在Vue中使用Vuex，在Angular中使用NgRx。
零基础快乐学习vuex
m0_65475272的博客
07-30 1055
也许有人会说。vuex已经被淘汰了，没人用，现在都是用大菠萝(pinia),但我得想法是，学一个东西要学习他的背景，为什么出现，然后一步一步的进行优化，才有今天的产物Pinia，由于现在有vue2和vue3，在这两个里面的用法可能不太一样，人非圣贤，孰能无过，希望我在错误的时候，大家指正一下，废话不多说，开始学习vuex。以下都来自官方文档！
vuex基础学习-看完即上手篇
qq_61950936的博客
09-07 511
看完即可入门开发!!!这篇文章介绍 vuex基础，以及总结案例。本文详细记录了所有步骤，拿来学习是真不错！看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！为什么会有Vuex?​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种`可预测的方式发生变化。vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。结论修改state状态必须通过mutations。
vue基础学习 Vuex和Vue路由——part02
weixin_46515434的博客
10-17 196
概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。简言之，Vuex可以实现多组件共享数据。在模板中一直使用来使用vuex中的值会很繁琐，我们可以在计算属性computed中来接收vuex中的值。但这样在vuex中数据很多的情况下，就要写很多这样的代码，因此我们可以使用mapState方法：用于帮助我们映射state中的数据。
Vuex学习
qq_34749898的博客
03-19 146
第一天开始学习vuex，官网的文档看得有点蒙就百度了一下。脚手架用的是vue-cli，然后npm install vuex --save首先，我在src下创建了一个store.js文件，一个简单的数值加减方法内容如下：import Vue from 'vue'; //引用Vue import Vuex from 'vuex'; //引用vuex Vue.use(Vuex); //把vuex...
vuex的深入学习[基于vuex3]----篇(二)
m0_73280507的博客
06-23 829
store: store对象实例，new Vuex.store({…})生成的对象rootState: 根模块的state对象path: 当前模块所处的层级数组module: 模块对象hot。
vue项目的学习总结，vuex简单理解，
Thanks的博客
11-06 271
xlyshop APP 该项目的前端部分 该项目的后端部分 A Vue.js project 总结 再次学习vue收获了更多 整个项目再次分析 前台数据处理/交互/组件化 使用了vue全家桶/技术栈，滑动库，日期处理等。 前后台交互，mock数据，postman接口测试，Ajax请求，重写Ajax（）并使用了promise编写 import axios from 'ax...
Vuex学习笔记
重楼的博客
10-30 340
Vue最核心的两个功能:数据驱动和组件化。 每个组件都有自己的状态、视图和行为等部分组成。 new Vue({ //state data(){ return { count:0 } }, //view template:` <div>{{count}}</div> `, //actions methods:{ increment(){ this.count++; } } }) 状态管理包括: （1）state,驱动应用的数据源
11-vuex-action-mutation-区别.md
03-31
基础知识能保证最基本的使用，即招聘进来能干活，能产出。 ## 考察的重点 - HTML CSS JS 基础知识 - HTTP Ajax 基础知识 - Vue 等框架的基本应用 ## 注意事项 不会从 0 基础讲起，基础不熟悉可以向讲师提问 ## ...
vue-task:使用vue，vuex，vue-router，typescript开发一个单页面系统
03-11
开始之前，还是有必要去vue官网学习一下vue，至少得有个大致的了解，后面在用到vue-router和vuex时，再去对应的仓库看文档就可以了。 创建项目可以用vue-cli，具体看 结构 项目结构一般来说非常重要，定义好的目录...
vue表单验证你真的会了吗？vue表单验证（form）validate
11-30
学习了一下webpack，基础的一些组件，今天带来form表单验证组件（element.iviewui）的一期教程（作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 （QQ群技术讨论）838293023备注（github进来的 github 技术文档...
elru-front
02-10
Vue.js，简称为Vue，是由尤雨溪开发的开源JavaScript框架，它专注于视图层，易于学习且能与现有库或项目无缝集成。Vue的核心库只关注视图层，这使得它在各种项目中非常灵活，无论是小型的单页应用还是大型的复杂应用...
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1462
本文介绍了电子签名、图片合成、及预览功能
vue+element 根据父容器动态设置table高度出滚动条
最新发布
xu_duo_i的博客
08-02 310
vue+element 根据父容器动态设置table高度出滚动条
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 308
SignList这三个页面就是需要切换的页面。
pinia和vuex的区别？
07-13
Pinia和Vuex都是Vue.js应用的状态管理解决方案，它们都用于集中式存储和管理组件间...1. 在Vue项目中，如何选择Pinia还是Vuex？ 2. Pinia是否支持watch或者监听？ 3. 当应用规模较大时，Pinia和Vuex分别有哪些优缺点？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值