Vuex的核心组成、版本问题及store.js的使用、 Vuex中存值、取值以及获取变量值、异步同步操作和Vuex后台交互

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

目录

前言

为什么要去使用Vuex

 vue传值

变量传值的演变形式：  

一、Vuex的核心组成

 Vuex官方图解  

图解Vuex各组件

由4个组件组成

Vuex分成五个部分：

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

二、vuex使用步骤

1.    加载依赖 npm install vuex -s下载Vuex最新版本的依赖(注意)

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

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

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

运行

更改Vuex版本号

 修改版本后的运行

三、 Vuex中存值、取值以及获取变量值

查看界面效果：

不点击"盘他"按钮

 点击"盘他"按钮

四、异步同步操作

效果演示：

五、Vue后台交互

Vuex中是如何跟后台交互的？

运行效果：

前言

为什么要去使用Vuex

Vuex 解决了前端传参的问题，针对当前项目所有的变量进行统一管理
可以理解为“前端数据库”(数据仓库)专门存储变量值

让其在各个页面上实现数据的共享包括状态，并且可操作

 vue传值

变量传值的演变形式：  

组件传参

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


总线 vue根实例中定义变量，这个变量也是vue实例

一、Vuex的核心组成

 Vuex官方图解  

图解Vuex各组件

由4个组件组成

Vuex分成五个部分：

  1.State：单一状态树（存储变量）

   2.Getters：状态获取（改变变量值）

   3.Mutations：触发同步事件（改变变量值--同步）

   4.Actions：提交mutation，可以包含异步操作（改变变量值--异步）

   5.Module：将vuex进行分模块

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

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

const store = new Vuex.Store({

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

       getters,  // 获取数据并渲染

       actions,  // 数据的异步操作

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

      })

二、vuex使用步骤

1.    加载依赖 npm install vuex -s下载Vuex最新版本的依赖(注意)

在项目根目录中运行dos命令，输入指令 npm install vuex -S

注意看这里Vuex的版本号，小编在此留下一个“小伏笔”

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

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

在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

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

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

state.js

export default {
  resName:'鸡崽餐厅'
}

设置路由

VuexPage1.vue

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

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

运行

可以看见，报了state 的 undefined 的错是为什么呢？

还记得小编在上面说了一个“小标记”

更改Vuex版本号

因为版本原因，版本不同的话效果出不来，我们更改一下版本号，命令： npm i -S vuex@3.6.2 

@+对应版本号

 可以看到，Vuex的版本号以及更改了。

 修改版本后的运行

三、 Vuex中存值、取值以及获取变量值

更改VuePage1.Vue:

<template>
  <div>
    <p>页面1：欢迎来到{{msg}}</p>
    <button @click="buy">盘他</button>
  </div>
</template>

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

VuePage2.Vue：

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

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

mutations.js(存值)：

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

getters.js(取值)：

export default {
  //state代表着state.js整个文件
 getResName:(state)=>{
   return state.resName;
 }
}

 router/index.js：

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'
import VuexPage2 from '@/views/sys/VuexPage2'

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
        },
        {
          path: '/sys/VuexPage2',
          name: 'VuexPage2',
          component: VuexPage2
        }
      ]
    }
  ]
})

查看界面效果：

不点击"盘他"按钮

页面一：

页面二：

 点击"盘他"按钮

页面一：

此时我们再查看页面二：同样发生了改变

四、异步同步操作

VuexPage1.vue：

<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: '大鸡崽'
        })
      },
      buyAsync() {
        this.$store.dispatch("setResNameAsync", {
          resName: '颜忠鸡'
        })
      }
    },
    computed: {
      msg() {
        //从vue 的state 文件中获取值
        // return this.$store.state.resName;//不推荐，不安全
        //通过 getters.js文件 获取 state.js中定义的变量值
        return this.$store.getters.getResName;
      }
    }
  }
</script>
<style>
</style>

actions.js：

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

  }
}

效果演示：

先点击最终的鸡，此时会没有反应

 我们再点击 “盘它”，

可以看到的现象：在点击了最终的鸡六秒之后，会切换为“颜忠鸡” 

此时我们的同步跟异步是同时在进行的 

五、Vue后台交互

Vuex中是如何跟后台交互的？

VuexPage1.vue：

<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: '大鸡崽'
        })
      },
      buyAsync() {
        this.$store.dispatch("setResNameAsync", {
          resName: '颜忠鸡',
          _this:this//通过键传到actions.js里面，获取到
        })
      }
    },
    computed: {
      msg() {
        //从vue 的state 文件中获取值
        // return this.$store.state.resName;//不推荐，不安全
        //通过 getters.js文件 获取 state.js中定义的变量值
        return this.$store.getters.getResName;
      }
    }
  }
</script>
<style>
</style>

 actions.js

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

    //通过payload里 传参的方式获取到vue实例
    let _this = payload._this;
    let url = _this.axios.urls.SYSTEM_MENU_TREE;
    _this.axios.post(url, {}).then(r => {
      console.log(r);
    }).catch(e => {

    });
  }
}

运行效果：

歐陽。
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue项目 store.js使用
weixin_43853686的博客
04-20 4665
准备工作： 1.安装依赖 npm install vuex 2.创建store文件夹以及store.js文件 在根目录下，当然，这是因为我是用cil3创建的项目，导致没有store文件以及store.js文件 对了，如果你是在src文件夹下创建store文件夹，nastore.js要改名为index.js 开始： 1.直接上代码，这一步没啥好说 import vue from 'vue' import vuex from 'vuex' vue.use(vuex); 2.还是上代码，这个.
vuex学习详细源码 实现store/index.js文件的详细拆分
04-05
vuex学习详细源码 实现store/index.js文件的详细拆分
Vuex 4与状态管理实战指南
06-06 1250
这篇文章介绍了使用Vuex进行Vue应用状态管理的最佳实践，包括为何需要状态管理，Vuex的核心概念如store、actions、mutations和getters，以及如何处理异步操作和模块化组织状态。虽然Vuex是为Vue设计的，但理论上也可以在React应用中使用。Vuex与Vue的关系是互补的，Vue负责视图层的渲染，而Vuex则负责管理应用的状态。在实际开发中，推荐使用每个框架对应的状态管理解决方案，例如在React中使用Redux，在Vue中使用Vuex，在Angular中使用NgRx。
store.js
dianzongliao7933的博客
03-19 519
store.js 是一个实现了浏览器的本地存储的 JavaScript 封装 API，不是通过 Cookie 和 Flash 技术实现，而是使用 localStorage、globalStorage 和 userData 行为。 示例代码： // Store 'marcus' at 'username' store.set('username', 'marcus') //...
Vue爬坑之旅(十六)：storejs一款好用的本地存储插件
帆酱的博客
02-12 4331
store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。store.js 会根据浏览器自动选择使用localStorage、globalStorage 或者 userData 来实现本地存储功能。 本章介绍在vue中使用store.js 一、安装 npm install storejs --save 二、引入 可以全局引...
vue3如何使用vuex以及如何持久化存储
qq_45083002的博客
06-08 1420
vuex在vue3中具体的使用方法以及如何持久化存储
SvelteJs学习——Stores
我是我
07-18 791
状态存储 store
vuex中store存储store.commit和store.dispatch的用法
10-15
`store.commit` 和 `store.dispatch` 是 Vuex 中用于管理和改变状态的核心方法，它们各自有不同的功能和应用场景。 **1. store.commit** `store.commit` 用于触发一个 **mutation**（状态变更事件）。Mutation 是 ...
vuex 解决报错this.$store.commit is not a function的方法
10-17
在使用过程中，注意正确导入、注册 store，以及在组件中正确引用 state 和 commit mutation，避免出现 `this.$store.commit is not a function` 的错误。同时，遵循 Vuex 的单一状态树原则，保持状态的集中管理，有...
vuex存值与取值的实例
10-16
在Vuex中，存值（mutating）和取值（getting）是通过特定的方法来实现的，这些方法保证了状态变更的可控性和可追踪性。以下是一个关于Vuex存值与取值的实例详解： 1. **组件内取值**： 在Vue组件中，我们通常通过...
Vue 同步异步存值取值实现案例
10-15
本篇文章将探讨如何在 Vue 中实现同步和异步的存值取值，以及使用 Vuex 进行状态管理。 首先，让我们了解 Vue 中组件间的基本通信方式： 1. **父子组件通信**： - **父组件向子组件传递数据**：通过 `props` 属性...
Vue开发实例（14）之Vue状态管理store
编程界明世隐的博客
05-10 1万+
Vue开发实例（14）之Vue状态管理store
javascript之store.js 轻松实现本地存储（LocalStorage）
weixin_34417814的博客
06-09 527
2019独角兽企业重金招聘Python工程师标准>>> ...
个人笔记-----Vuex创建store.js和使用【如有不对，欢迎指正】
诗酒趁年华
04-28 2464
store.js相当于一个共享库，把很多共享的数据存放在这个store.js中，其他页面想取用，需要到store.js这个页面中取用，如果想改变数据也需要到store.js中修改数据。 创建store.js需要以下几步: 1，在src下面新建一个vuex文件夹， 2，在vuex创建store.js， 3，在store.js中引用vue和vuex，并且使用vuex， 4，定义数据，在State里面进...
前端学习笔记（15）-Vue3状态管理store及Vuex的使用
热门推荐
JiangZhengyang7的博客
01-31 1万+
1. 状态管理 2.用响应式API做简单状态管理 3.Vuex基础 4.Vuex 核心概念（state getter mutation action module）5.Vuex+sessionStorage实现数据存储
最简单的store.js
qq_34821290的博客
04-11 803
创建一个store.js imort vue from 'vue; import vuex from 'vuex' vue.use(vuex) export default new vuex.store({ state:{ //放全局参数 demo:{} }, mutation:{ //set方法 setDemo(state,demo){ state.demo = demo } }, getters:{ //get方法 getDemo:state=>state.dem
store.js过期时间设置
qq_42822849的博客
05-26 1201
store.js设置过期时间
微信在浏览器打开拦截了 微信屏蔽网址打开如何解决
weixin_30875157的博客
01-15 3855
身在网站要想在微信端被使用，多多少少都会有预防被拦截，是专门为运营网站和公众号的运营者一个研究的工具几十你是正常网站， 也是公司企业备案，照样也会被拦截。这个被拦截一般来说就是你的这个域名已经在微信中打不开了，意思就是被封了。 就是这个会出现“已停止访问该网页”和一个“申请恢复访问”，在这里说明一点，若果你想要申请恢复访问的话， 这个过程很复杂，人工电话核实，企业信息核实确认，等等最后才...
vuex中 this.store.dispatch 使用
最新发布
06-14
在Vuex中，`this.store.dispatch()` 是用于向应用的状态树（state tree）中执行一个异步或同步的action的方法。Vuex是Vue.js官方推荐的状态管理模式，它帮助我们管理单个应用中的共享状态。 当你调用 `this.store.dispatch(actionName, [payload])` 时，做了以下几个事情： 1. **Action 名称（actionName）**：这是你要触发的action的名称，它是一个字符串。Action是一组可复用的操作，它们通常定义在`store/modules`中，每个模块都有自己的actions。 2. **Payload（可选）**：这是一个可选的数据对象，你可以传递给action的参数，action可以操作这些数据并返回一个值。 - **异步调用**：如果action中包含了`async`关键字，那么dispatch会返回一个Promise，你可以使用`.then()`、`.catch()`等方式处理action的结果。这使得你可以在action完成时更新状态，并在必要时通知到视图层。 - **同步调用**：如果action没有`async`，它将立即执行并返回结果，然后你可以直接操作返回的值。 - **分发过程**：`dispatch`会自动处理action的上下文（context），确保你在action内部可以访问`store`实例以及相关的辅助方法，如`commit()`（用于修改状态）和` getters`（用于读取状态）。 相关问题： 1. 在Vuex中，action通常如何组织和管理？ 2. 如何在action中处理成功和失败的情况？ 3. 在action执行时，为什么要使用`commit`而不是直接修改状态？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

歐陽。

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

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

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

打赏作者

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

抵扣说明：

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

余额充值