• Vuex怎么使用？来看看吧~

      

    目录

    一、Vuex的简介

    1、为什么要学习Vuex?

    解决了前端组件传参的问题。

    组件传参：

            ①子传父：$emit

            ②父传子：props

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

    2、什么是Vuex?

     官方图解Vuex：

     图解Vuex各组件:

     变量传值的演变方式：

    Vuex的核心组件：​​​​​​​

    二、Vuex的安装以及store.js的使用

    1、vuex使用步骤

            ​​​​​​​1.1 安装

            npm install vuex -s 【下载Vuex最新的版本】

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

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

            1.4 测试Vuex的存储变量的功能

                  npm i -S vuex@3.6.2 

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

    四、Vuex中的异步同步操作

    五、Vuex后台交互

    一、Vuex的简介

    1、为什么要学习Vuex?

    解决了前端组件传参的问题。

    组件传参：

            ①子传父：$emit

            ②父传子：props

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

    2、什么是Vuex?

     官方图解Vuex：

     图解Vuex各组件:

     变量传值的演变方式：

    Vuex的核心组件：

            sate.js        存储变量

            Getters.js        获取变量值、

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

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

    二、Vuex的安装以及store.js的使用

    1、vuex使用步骤

    1.1 安装

            npm install vuex -s 【下载Vuex最新的版本】

    下载之后【package.json】 里会出现vuex

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

    建立store文件，将【actions.js】、【index.js】、【mutations.js】、【state.js】、【getters.js】添加进去

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

    1.4 测试Vuex的存储变量的功能

    记得更改vuex依赖的版本 运行一下命令

     npm i -S vuex@3.6.2 

    【state.js】

    1. export default{
    2.   resName4:'cc咖啡馆'
    3. }

    【router/index.js】

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import AppMain from '@/components/AppMain'
    5. import TopNav from '@/components/TopNav'
    6. import LeftNav from '@/components/LeftNav'
    7. import Login from '@/views/Login'
    8. import Reg from '@/views/Reg'
    9. import Articles from '@/views/sys/Articles'
    10. import VuexPage1 from '@/views/sys/VuexPage1'
    11.  
    12. Vue.use(Router)
    13.  
    14. export default new Router({
    15.   routes: [{
    16.       path: '/',
    17.       name: 'Login',
    18.       component: Login
    19.  
    20.     },
    21.     {
    22.       path: '/Login',
    23.       name: 'Login',
    24.       component: Login
    25.  
    26.     },
    27.     {
    28.       path: '/Reg',
    29.       name: 'Reg',
    30.       component: Reg
    31.  
    32.     }
    33.     ,
    34.         {
    35.           path: '/AppMain',
    36.           name: 'AppMain',
    37.           component: AppMain,
    38.           children: [{
    39.               path: '/LeftNav',
    40.               name: 'LeftNav',
    41.               component: LeftNav
    42.  
    43.             },
    44.             {
    45.               path: '/TopNav',
    46.               name: 'TopNav',
    47.               component: TopNav
    48.  
    49.             },
    50.             {
    51.               path: '/sys/Articles',
    52.               name: 'Articles',
    53.               component: Articles
    54.  
    55.             },
    56.             {
    57.               path: '/sys/VuexPage1',
    58.               name: 'VuexPage1',
    59.               component: VuexPage1
    60.  
    61.             }
    62.           ]
    63.  
    64.         }
    65.   ]
    66. })

    【VuexPage1.vue】

    1. <template>
    2.   <div>
    3.     <p>欢迎来到{{msg}}p>
    4.   div>
    5. template>
    6.  
    7. <script>
    8.   export default {
    9.     name: 'VuexPage1',
    10.     data () {
    11.       return {
    12.       }
    13.     },
    14.     computed:{
    15.       msg(){
    16.         console.log(this.$store)
    17.         //  从vuex 的 state 文件中获取值
    18.         return this.$store.state.resName;
    19.         // this.$router.push()...
    20.         // this.$root
    21.       }
    22.     }
    23.   }
    24.  
    25. script>
    26.  
    27. <style>
    28. style>

    运行效果展示：

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

    是通过方法去获取值。

    【VuexPage2.vue】

    1. <template>
    2.   <div>
    3.     <p>页面2：欢迎来到{{msg}}p>
    4.   div>
    5. template>
    6.  
    7. <script>
    8. export default {
    9.   name: 'VuexPage2',
    10.   data () {
    11.     return {
    12.     }
    13.   },
    14.  
    15.   computed:{
    16.     msg(){
    17.     //  从vuex的state文件中获取值
    18.     //   return this.$store.state.resName;——>不推荐，不安全
    19.     //  通过getters.js文件获取state.js中定义的变量值
    20.       return this.$store.getters.getResName;
    21.     }
    22.   }
    23. }
    24. script>
    25.  
    26. <style scoped>
    27.  
    28. style>

    【router/index.js】

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from "../components/HelloWorld";
    4. import AppMain from "../components/AppMain";
    5. import LeftNav from "../components/LeftNav";
    6. import TopNav from "../components/TopNav";
    7. import Login from "../views/Login";
    8. import Reg from "../views/Reg";
    9. import Articles from "../views/sys/Articles";
    10. import VuexPage1 from "../views/sys/VuexPage1";
    11. import VuexPage2 from "../views/sys/VuexPage2";
    12.  
    13.  
    14. Vue.use(Router)
    15.  
    16. export default new Router({
    17.   routes: [
    18.     {
    19.       path: '/',
    20.       name: 'Login',
    21.       component: Login
    22.     },
    23.     {
    24.       path: '/Login',
    25.       name: 'Login',
    26.       component: Login
    27.     },
    28.     {
    29.       path: '/Reg',
    30.       name: 'Reg',
    31.       component: Reg
    32.     },
    33.     {
    34.       path: '/AppMain',
    35.       name: 'AppMain',
    36.       component: AppMain,
    37.       children:[
    38.         {
    39.           path: '/LeftNav',
    40.           name: 'LeftNav',
    41.           component: LeftNav
    42.         },
    43.         {
    44.           path: '/TopNav',
    45.           name: 'TopNav',
    46.           component: TopNav
    47.         },
    48.         {
    49.           path: '/sys/Articles',
    50.           name: 'Articles',
    51.           component: Articles
    52.         },
    53.         {
    54.           path: '/sys/VuexPage1',
    55.           name: 'VuexPage1',
    56.           component: VuexPage1
    57.         },
    58.         {
    59.           path: '/sys/VuexPage2',
    60.           name: 'VuexPage2',
    61.           component: VuexPage2
    62.         }
    63.       ]
    64.     }
    65.   ]
    66. })

    【mutations.vue】

    1. export default{
    2.   // 定义一个setResName的方法
    3.   setResName:(state,payload)=>{
    4.   // sate对象就对应了sate.js中的对象
    5.   // payload载荷 对应的 传递的 josn对象参数(name:zs,age:12)
    6.   state.resName = payload.resName;
    7.   }
    8. }

    【getters.js】

    1. // 拿
    2. export default{
    3.   getResName:(state)=>{/* 这里的sate代表的是sate.js整个文件 */
    4.     return state.resName;
    5.   }
    6. }

    效果运行： 点击按钮

     就会出现以下效果:

     

    （角色管理）VuexPage2.vue​​​​​​​

     点击按钮 之后：

     

    四、Vuex中的异步同步操作

    【VuexPage1.vue】

    1. <template>
    2.   <div>
    3.     <p>页面1：欢迎来到{{msg}}p>
    4.     <button @click="buy">买下它button>
    5.      <button @click="buyAsync">最终店长button>
    6.   div>
    7. template>
    8.  
    9. <script>
    10. export default {
    11.   name: 'VuexPage1',
    12.   data () {
    13.     return {
    14.     }
    15.   },
    16.   methods:{
    17.     buy(){
    18.       // 通过commit方法会调用mutation.js中定义好的方法
    19.       this.$store.commit("setResName",{
    20.         resName:'KFC'
    21.       })
    22.     },
    23.     buyAsync(){
    24.       this.$store.dispatch("setResNameAsync",{
    25.         resName:'麦当劳'
    26.       })
    27.     }
    28.   },
    29.   computed:{
    30.     msg(){
    31.     //  从vuex的state文件中获取值
    32.     // return this.$store.state.resName; 不推荐，不安全
    33.     //  通过 getters.js文件获取 state.js中定义的变量值
    34.         return this.$store.getters.getResName;
    35.     }
    36.   }
    37. }
    38. script>
    39.  
    40. <style scoped>
    41.  
    42. style>

    【actions.js】

    1. export default{
    2.   setResNameAsync:(context,payload)=>{
    3.     // 异步修改值 在异步的方法里调用同步方法
    4.     // context 指的是Vuex的上下文,相当于 this.$store
    5.     // 此代码6秒钟后执行
    6.     setTimeout(function(){
    7.       context.commit("setResName",payload);
    8.     },6000);
    9.  
    10.   }
    11. }

    效果演示：

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

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

     

    五、Vuex后台交互

    【actions.js】 

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

    【VuexPage1.vue】

    1. <template>
    2.   <div>
    3.     <p>页面1：欢迎来到{{msg}}p>
    4.     <button @click="buy">盘它button>
    5.     <button @click="buyAsync">最终的店长button>
    6.   div>
    7. template>
    8.  
    9. <script>
    10. export default {
    11.   name: 'VuexPage1',
    12.   data () {
    13.     return {
    14.     }
    15.   },
    16.   methods:{
    17.     buy(){
    18.       //通过commit方法 会 调用 mutations.js文件中定义好的方法
    19.       this.$store.commit("setResName",{
    20.         resName:'鸡肉味的猫粮'
    21.       })
    22.     },
    23.     buyAsync(){
    24.       this.$store.dispatch("setResNameAsync",{
    25.         resName:'杨总',
    26.         _this:this
    27.       })
    28.     }
    29.   },
    30.   computed:{
    31.     msg(){
    32.     //  从vuex的state文件中获取值
    33.     //   return this.$store.state.resName;——>不推荐，不安全
    34.     //  通过getters.js文件获取state.js中定义的变量值
    35.       return this.$store.getters.getResName;
    36.     }
    37.   }
    38. }
    39. script>
    40.  
    41. <style scoped>
    42.  
    43. style>

    运行：

    本篇内容分享到此结束，我们下期再见！ 

  • 相关阅读:
    基于stm32单片机的光照检测智能台灯
    第8讲：Python中列表的概念与基本使用
    【力扣练习题】加一
    【WEB前端2024】3D智体编程：乔布斯3D纪念馆-第46课-使用json文件
    运维自动化之域名系统
    【Qt】之【项目】整理可参考学习的git项目链接（持续更新）
    JS逆向 | 推特x-guest-token
    Node18.x基础使用总结(二)
    STM32自学☞DMA数据转运以及DMA+AD多通道案例
    SVN安装教程
  • 原文地址：https://blog.csdn.net/m0_67094505/article/details/126896259