你还不知道怎么使用Vuex？赶紧来看看吧！

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

目录

一、Vuex的核心组成

为什么要学习Vuex呢？

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

组件传参的方式我们目前学习了有两种：

1、子传父 $emit     父传子 props

2、总线

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

3、核心组件（第三种）：

        ①state.js  存储变量

        ②Getters.js  获取变量值

        ③mutations.js  改变变量值（同步）

        ④actions.js   改变变量值（异步）

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

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

Vuex使用步骤

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

（注意：小编所使用的版本不同： 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的核心组成

为什么要学习Vuex呢？

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

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

 

通过前期的知识分享可以了解到，

组件传参的方式我们目前学习了有两种：

1、子传父 $emit     父传子 props

2、总线

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

官方图解Vuex：

 

 我的个人图解：

 

通过学习了今日的 Vuex 知识之后，我们又可以了解到一个组件传参的方式：

3、核心组件（第三种）：

        ①state.js  存储变量

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

        ②Getters.js  获取变量值

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

        ③mutations.js  改变变量值（同步）

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

        ④actions.js   改变变量值（异步）

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

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

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

Vuex使用步骤

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

（注意：小编所使用的版本不同： npm i -S vuex@3.6.2）

 


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

 

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实例中

 

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

state.js：

export default {
  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";



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
        }
      ]
    }
  ]
})

VuexPage1.vue：

<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 scoped>

</style>

运行：

 

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

 VuexPage2.vue：

<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>

 

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
        }
      ]
    }
  ]
})

 

mutations.vue：

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

getters.js：

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

  }
}

运行：

（角色管理）VuexPage2.vue:

 如果点击按钮之后：

 角色管理（VuexPage2）也同样共用了VuexPage1的界面：

 

四、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:'杨总'
      })
    }
  },
  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);


  }
}

效果演示：

先点按钮最终的店长，然后点按钮盘它：

 

时隔6秒之后，发生改变： 

 

五、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.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
      })
    }
  },
  computed:{
    msg(){
    //  从vuex的state文件中获取值
    //   return this.$store.state.resName;——>不推荐，不安全
    //  通过getters.js文件获取state.js中定义的变量值
      return this.$store.getters.getResName;
    }
  }
}
</script>

<style scoped>

</style>

运行：

Vuex后台交互完成！

今日分享就到这了，感谢观看！

酒醉猫(^･ｪ･^)
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vuex怎么使用？来看看吧~
m0_67094505的博客
09-18 5845
sate.js 存储变量Getters.js 获取变量值、mutations.js 改变变量值（同步）actions.js 改变变量值（异步）
一步教你怎么使用Vuex
weixin_67465673的博客
09-17 3326
官网的图解 Vuex： 了解后图解Vuex各组件 ： 获取值 this.$store.state.变量值 获取值 this.$store.gettres.变量的get方法 改变值 this.$store.commit("同步的方法"，{...}) 改变值 this.$store.dispath("异步的方法"，{..
手把手教你使用Vuex，猴子都能看懂的教程
niu18338700287的博客
06-28 3904
带你了解一下vuex，看来这篇文章相信你会更加清楚vuex
vuex的基本使用
Cherries_h的博客
05-02 1万+
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 为什么使用状态管理？整站开发会有很多数据和状态，整站也是由很...
vuex如何使用？
hellow_tommer的博客
12-29 2764
一、了解vuex vuex 是 vue 中必不可少的一部分。它相对于是一个公共的仓库，存储的内容可以让全部页面都能去获取，使用。 每一个vuex中的核心就是store（仓库）。它基本上就是一个容器，包含着你应用中大部分的状态（state）; vuex与全局变量是不同的： 1.vuex的状态存储是响应式的，当vue组件中从store读取状态时，若store发生改变，那么相应的组件也会相应得到高效更新 ...
为什么要使用Vuex的介绍
10-17
今天小编就为大家分享一篇关于为什么要使用Vuex的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
如何使用vuex实现兄弟组件通信
12-29
下面这篇文章就来给大家介绍下vuex兄弟组件通信的方法，下面话不多说了，来一起看看详细的介绍吧 1. 核心想法 使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一)，将每个子组件的...
vue-vuex中使用commit提交mutation来修改state的方法详解
10-18
今天小编就为大家分享一篇vue-vuex中使用commit提交mutation来修改state的方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuex具体使用 ...
04-24
vuex具体使用 ... 具体说明文档可以看 很简单 技术有限
详解如何在vue-cli中使用vuex
10-18
主要介绍了详解如何在vue-cli中使用vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
别人压缩的vuex项目 如何打开运行
lxhz520的博客
09-16 549
别人压缩的vuex项目 如何打开？ 解压项目 放到桌面 然后进入项目把node-module文件删除 执行cnpm install (根据package.json配置)安装依赖 node-module 安装好后 运行npm run dev就可以 如果出现 stylus + 4 就可以安装stylus插件 以下情况 则需要安装 cnpm install stylus 再安装loader： ...
VUE：教你如何运行vue项目
叶落无痕的博客
06-28 2万+
安装首先下载安装node.js https://blog.csdn.net/wypersist/article/details/80492576 运行项目 进行定位到项目的路径 进入项目之后安装依赖 npm install 安装成功后你会发现项目里多了个 然后 npm run dev 自动启动浏览器就会打开项目了 不自启打开localhost:8080 参考：https://blog.csdn.net/WYpersist/article/details/80496259 ...
如何使用vuex
weixin_41578487的博客
03-06 530
官网：https://vuex.vuejs.org安装1. 使用命令行：npm install vuex –save2. 在src文件夹下新建一个文件夹store,里面新建一个文件：store.js3. 在main.js里引入store文件： 4. 如何在组件中使用store中的数据：找到需要使用数据的组件，在计算属性里如下写入代码，可引入store里面的数据： 引入store里面的方法（也是写在...
Vuex 使用方法（简单易懂）
花生吃花生的学习记录
10-30 316
Vuex是在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 Vuex的使用方法： 一、安装 npm install vuex --save 使用npm进行安装 二、引入 新建文件：src/store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default n..
vue中使用vuex(超详细)
热门推荐
一只前端小菜鸟
07-15 17万+
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。 那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步） 一、适合初学者使用，保存数据以及...
简单使用Vuex步骤及注意事项
weixin_34111790的博客
08-06 272
使用Vuex的步骤： （1）安装： 　　1.使用npm安装： 　　　　 npm install vuex --save 　　 　　2.使用script标签引入 　　　　 <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></s...
vuex怎么使用
baidu_36681154的博客
01-29 4862
概念 vuex其实这个概念在文档中很难准确理解，而它本身就是一个公共的数据仓库， 有什么用? 例如你在登录百度页面时，你的登录状态， 你在百度贴吧页面的登录状态与你在百度百科页面的登录状态实际上是一样的， 这说明你需要一个公共的仓库来存储它，所以vuex基于此实践 怎么用？ 第一步 cmd进入到你的项目目录，并且输入命令 cnpm  install vuex --sav
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 604
记录一次前端页面崩溃的产生及处理
在哪里可以看vuex里的数据
05-30
如果你使用 Vue.js 开发者工具，则可以在“状态”选项卡下找到 Vuex 存储，以及存储中的数据。如果你没有安装 Vue.js 开发者工具，则可以在浏览器控制台中使用以下代码来查看 Vuex 存储中的数据： ``` console.log...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

酒醉猫(^･ｪ･^)

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

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

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

打赏作者

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

抵扣说明：

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

余额充值