Vue10:简单使用Vuex

最新推荐文章于 2024-04-29 12:31:14 发布
最新推荐文章于 2024-04-29 12:31:14 发布
阅读量57 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59084280/article/details/131994503
版权

本节学习目标：

1、了解vuex中的各个js文件的用途

2、利用vuex同步存值

3、利用vuex取值

4、Vuex的异步加载问题及后台调用问题

一，Vuex中的各个js文件的用途

1.变量传值的演变形式

 图解Vuex各组件的作用

官方图解Vuex

 


2. vue中各个组件之间传值


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

 2.2非父子组件或父子组件
   通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...)

 2.3非父子组件或父子组件
   更好的方式是在vue中使用vuex

方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。
方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据
 

二、 Vuex 

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

 Vuex分成五个部分： 
   1.State：单一状态树
   2.Getters：状态获取
   3.Mutations：触发同步事件
   4.Actions：提交mutation，可以包含异步操作
   5.Module：将vuex进行分模块

 vuex使用步骤

1、安装
npm i -S vuex@3.6.2

 补充：vue对应版本为2.0版本，则vuex使用3.0版本

            vue对应版本为3.0版本，则vuex使用4.0版本

            vue的2.14.0版本是临界点

2、创建store模块，分别维护state/actions/mutations/getters

 3、在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块
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
4、在main.js中导入并使用store实例
import store from './store'
new Vue({
  el: '#app',
  router,
//添加store
  store,
  components: { App },
  template: '<App/>',//index.html
  data(){
    return{
        Bus: new Vue({})
    }
  }
})
5、示例(同步操作)
5.1在vuex中添加两个组件（views/vuex/Page1.vue）

 5.2配置路由（router/index.js）
//前面导入Page1.vue,Page2.vue
import Page1 from '@/views/vuex/Page1'
import Page2 from '@/views/vuex/Page2'


//routes中加入
{
    path: '/vuex/Page1',
    name: 'Page1',
    component: Page1
},
{
    path: '/vuex/Page2',
    name: 'Page2',
    component: Page2
}
LeftNav.vue中加入
<div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>

    <!-- vuex示例 -->
    <el-menu-item index="/vuex/Page1" key="key_999">
        <i class=""></i>
        <span>vuex页面1</span>
    </el-menu-item>
    <el-menu-item index="/vuex/Page2" key="key_1000">
        <i class=""></i>
        <span>vuex页面2</span>
    </el-menu-item>
5.3启动服务器，得到运行结果

 

 5.4state直接取值：

state.js

export default{
  name:'hjl'
}

Page1取到值的时候，Page2也获取到了值，证明主键传参

Page1.vue

<template>
  <div>
    <h1>这是页面1==={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">state直接取值</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:null
      }
    },
    methods:{
      func1(){
        //不建议使用
        this.msg = this.$store.state.name;
      }
    }
  }
</script>

<style>
</style>

Page2.vue

<template>
  <div>
    <h2>这是页面2===={{msg}}</h2>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        //msg:null
      }
    },
    // created(){
    //   this.msg = this.$store.state.name;
    // }
    computed:{
      msg(){
        return this.$store.state.name;
      }
    }
  }
</script>

<style>
</style>

效果：

 

 5.4getters取值：

Page1.vue:

<template>
  <div>
    <h1>这是页面1==={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">state直接取值</button>
    <p>getters取值</p>
    <button @click="func2">getters取值</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:null
      }
    },
    methods:{
      func1(){
        //不建议使用
        this.msg = this.$store.state.name;
      }
      func2(){
        this.msg = this.$store.getters.getName;
      }
    }
  }
</script>

<style>
</style>

getters.js

export default{
  getName:function(state){
    return state.name;
  }
}

效果与之前一样 

 5.5mutation改变值

Page1.vue:

<template>
  <div>
    <h1>这是页面1==={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">state直接取值</button>
    <p>getters取值</p>
    <button @click="func2">getters取值</button>
    <p>mutations取值</p>
    <button @click="func3">mutations改变值</button>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        //msg:null
      }
    },
    //快速加载，实时监控
    computed:{
      msg(){
        return this.$store.state.name;
      }
    },
    methods:{
      func1(){
        //不建议使用
        this.msg = this.$store.state.name;
      },
      func2(){
        this.msg = this.$store.getters.getName;
      },
      func3(){
        this.$store.commit('setName',{name:'hjlplus'});
      }
    }
  }
</script>

<style>
</style>

mutation.js

export default{
  setName:function(state,payload){
    //payload:载荷
    state.name = payload.name;
  }
}

**加载优化：

        computed:{
              msg(){
                        return this.$store.state.name;
              }
            }, 

6、示例(异步操作) 

Page1.vue:

<template>
  <div>
    <h1>这是页面1==={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">state直接取值</button>
    <p>getters取值</p>
    <button @click="func2">getters取值</button>
    <p>mutations取值</p>
    <button @click="func3">mutations改变值</button>
    <p>actions取值</p>
    <button @click="func4">actions改变值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //msg:null
      }
    },
    //快速加载，实时监控
    computed: {
      msg() {
        return this.$store.state.name;
      }
    },
    methods: {
      func1() {
        //不建议使用
        this.msg = this.$store.state.name;
      },
      func2() {
        this.msg = this.$store.getters.getName;
      },
      func3() {
        this.$store.commit('setName', {
          name: 'hjlplus'
        });
      },
      func4() {
        this.$store.dispatch('setNameAsync', {
          name: 'hjlplus---SSS'
        });
      }
    }
  }
</script>

<style>
</style>

actions.js

export default{
  setNameAsync:function(context,payload){
    // context指的是vue实例
    // 等价于this.$store
    setTimeout(function(){
      context.commit('setName',payload);
    },6000);
  }
}

 

 

三、actions中发送Ajax获取后台数据

Page1.vue:

<template>
  <div>
    <h1>这是页面1==={{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">state直接取值</button>
    <p>getters取值</p>
    <button @click="func2">getters取值</button>
    <p>mutations取值</p>
    <button @click="func3">mutations改变值</button>
    <p>actions取值</p>
    <button @click="func4">actions改变值</button>
    <p>后台Ajax取值</p>
    <button @click="func5">后台Ajax改变值</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //msg:null
      }
    },
    //快速加载，实时监控
    computed: {
      msg() {
        return this.$store.state.name;
      }
    },
    methods: {
      func1() {
        //不建议使用
        this.msg = this.$store.state.name;
      },
      func2() {
        this.msg = this.$store.getters.getName;
      },
      func3() {
        this.$store.commit('setName', {
          name: 'hjlplus'
        });
      },
      func4() {
        this.$store.dispatch('setNameAsync', {
          name: 'hjlplus---SSS'
        });
      },
      func5() {
        this.$store.dispatch('setNameAsync', {
          _this:this
        });
      }
    }
  }
</script>

<style>
</style>

action.js

'VUEX_INFO': '/vuex/queryVuex',//vuex异步获取数据

actions.js

export default{
  setNameAsync:function(context,payload){
    // context指的是vue实例
    // 等价于this.$store
    setTimeout(function(){
      context.commit('setName',payload);
    },3000);
  },
  setNameAjax:function(context,payload){
    let _this = payload._this;
    let url = _this.axios.urls.VUEX_INFO;
    let params ={
      resturantName:'修改为hjl'
    }
    _this.axios.get(url,{params:params}).then(resp=>{
        if(resp.data.success){
          context.commit('setName',{
            name:resp.data.msg
          })
        }
    }).catch(err=>{
      // console.log()
    })
  }
}

运行结果：

 

hjlplus
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-vuex:使用Vuex的简单Vue UpVote App
05-19
Vue Vuex 是一个用于构建 Vue.js 应用的状态管理模式。它结合了 Vue.js 的响应式系统和集中式的存储，使得管理应用程序的状态变得更为简洁和可控。在这个"Vue UpVote App"中，我们将会深入理解如何利用Vuex来创建一...
vuex:vue+vuex简单示例
05-13
在"vuex:vue+vuex简单示例"中，我们可以理解为这是一个演示如何在Vue项目中集成和使用Vuex的实例。首先，我们需要了解几个关键概念： 1. **State**：状态存储是Vuex的核心，它是一个全局的单一对象，用来保存应用的...
vuex的简单应用
Kepler_X的博客
01-17 216
vuex的简单应用一、简介二、vuex理解1）、vuex是什么2）、vuex的属性3）、vuex的优点4）、vuex的框图三、vuex应用1）、vuex的注册2）、vuex的使用1、状态统一管理2、更新的统一管理 一、简介 本文介绍了对vuex的理解以及将上一篇文章改为vuex统一管理 二、vuex理解 1）、vuex是什么 vuex为状态管理，集中管理组件的共用状态以及更新状态的函数等，可以理解...
Vuex
qq_45177371的博客
09-05 233
Vuex 首先来看看今天要用到的库 1. vue中各个组件之间传值 首先来看看变量传值的演变（图解） 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.emit(′事件名′,参数1,参数2,...);2.非父子组件或父子组件通过数据总数Bus，this.emit(&#x27;事件名&#x27;,参数1,参...
vue中的VueX详解及使用_vuex详解和用法
最新发布
2301_82243710的博客
04-29 847
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
Vuex的存储和取值
阳阳的博客
06-16 2849
vuex的基本使用
【Vue】之Vuex的入门使用，取值，修改值，同异步请求处理---保姆级别教学
m0_73192864的博客
10-11 1637
【Vue】之Vuex的入门使用，取值，修改值，同异步请求处理---保姆级别教学
Vue_vuex:关于vuex的简单使用
05-19
简单使用vuex1.src_加减，对应的是一个简单的加减项目2.src_todoList，对应的是一个简单todoList项目3.src_获取头像，对应的是一个简单使用axios向GitHub提供的接口，获取用户信息的demo虽然实现了功能，但是不符合...
vuex:Vue-Vuex
04-27
Vue Vuex 使得组件之间的通信变得更加简单，提高了大型 Vue 项目的可维护性。 在 Vue.js 应用中，组件的状态管理往往变得复杂，尤其是当多个组件需要共享状态或者进行复杂的交互时。Vue Vuex 提供了一个中心化的...
【网页设计大作业 NO.1】极简云盘-技术栈：Vue+Vuex+Vue-Router+axios
06-15
1、设计目的： 随着互联网技术的飞速发展和信息化建设的重视... 功能，简易使用，无需复杂的操作。 3、创新点： 相比于市场的云盘，简易云盘更加符合现代的简约风而且界面简洁，操作方便， 无需下载客户端即可使用
vuex的简单使用
qq_43527043的博客
09-25 409
vuex
一听就会---vuex存值取值，辅助函数mapActions,mapMutations超详细版
weixin_51035283的博客
11-10 1058
首先vuex（有些面试官会说 状态管理工具）可以把它理解成一个仓库，和redux一样，但是相对于redux来说 vuex 比较好理解，想学习 redux 同学关注我后续会发放 redux 的学习方法。 store 是默认生成的文件夹，store 翻译成中文是仓库的意思，所以就可以把它理解成一个存储数据的仓库。 好了废话不多说直接上 store 文件夹下的 index.js 文件 首先在默认的 store 库下的 index.js 文件 import Vue from 'vue' .
Vuex基本应用 简单案例
小羽向前跑
02-02 424
最终效果 结构： 安装Vuex： npm install vuex --save 在src下创建store文件夹，在store文件夹下创建index.js：   index.js全部内容： 引入即可使用： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) import Vue from 'vue' ...
Vuex简单应用
lieaiwen的博客
04-28 322
Vuex简单实战
vuex简单应用
weixin_45079974的博客
10-16 180
在项目中简单实用vuex import { createStore } from 'vuex' export default createStore({ state: { //这里定义的相当于一个全局公共的变量每个组件都可以使用 count:0 }, mutations: { }, actions: { }, modules: { } }) 在组件中使用的方法1 this.$stroe.state.count 由于在template中所以this可以省略 &
vue插件集合13：vuex的超级简单的应用
jdBug
01-09 213
第一步 安装vuex npm install vuex --save 第二步 新建store目录 在新建的store的目录下 新建 index.js文件 如下： import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); export default new vuex.Store({ state: { //变量名成 ethnum...
Vuex 的简单应用
枫
06-04 773
Vuex 的简单应用 文章目录Vuex 的简单应用1、Vuex 是什么？2、Vuex 的固定格式3、Vuex 的简单应用3.1、Vuex 的简单应用3.1.1、思路3.1.2、main.js 里引入3.1.3、组件代码3.1.4、store.js内容3.2、Vuex 在真实项目中的使用3.2.1、文件目录格式3.2.2、main.js 里引入3.2.3、组件代码3.2.4、store文件里对应模块...
Vue全家桶：深度解析Vuex状态管理
Vue全家桶中的Vuex状态管理是一个关键环节，尤其是在大型、复杂的前端应用中，有效地组织和控制状态至关重要。Vuex是基于状态管理模式，专为Vue.js设计，旨在解决组件之间共享状态的问题以及维护单一数据来源，确保...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值