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

    目录

    前言

    为什么要去使用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实例，并注册上面引入的各大模块

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    3. import state from './state'
    4. import getters from './getters'
    5. import actions from './actions'
    6. import mutations from './mutations'
    7. Vue.use(Vuex)
    8. const store = new Vuex.Store({
    9.   state,
    10.   getters,
    11.   actions,
    12.   mutations
    13. })
    14.  
    15. export default store

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

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

    state.js

    1. export default {
    2.   resName:'鸡崽餐厅'
    3. }

    设置路由

    VuexPage1.vue

    2.  
    3. <script>
    4.   export default {
    5.     name: 'VuexPage1',
    6.     data() {
    7.       return {}
    8.     },
    9.     computed: {
    10.       msg() {
    11.         //从vue 的state 文件中获取值
    12.         return this.$store.state.resName;
    13.       }
    14.     }
    15.   }
    16. script>
    17. <style>
    18. style>

    运行

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

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

    更改Vuex版本号

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

    @+对应版本号

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

     修改版本后的运行

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

    更改VuePage1.Vue:

    2.  
    3. <script>
    4.   export default {
    5.     name: 'VuexPage1',
    6.     data() {
    7.       return {}
    8.     },
    9.     methods: {
    10.       buy() {
    11.         //通过commit方法 会调用 mutations.js中定义好的方法
    12.         this.$store.commit("setResName",{
    13.           resName:'大鸡崽'
    14.         })
    15.       }
    16.     },
    17.     computed: {
    18.       msg() {
    19.         //从vue 的state 文件中获取值
    20.         // return this.$store.state.resName;//不推荐，不安全
    21.         //通过 getters.js文件 获取 state.js中定义的变量值
    22.         return this.$store.getters.getResName;
    23.       }
    24.     }
    25.   }
    26. script>
    27. <style>
    28. style>

    VuePage2.Vue：

    2.  
    3. <script>
    4.   export default {
    5.     name: 'VuexPage2',
    6.     data() {
    7.       return {}
    8.     },
    9.     computed: {
    10.       msg() {
    11.         //从vue 的state 文件中获取值
    12.         // return this.$store.state.resName;//不推荐，不安全
    13.         //通过 getters.js文件 获取 state.js中定义的变量值
    14.         return this.$store.getters.getResName;
    15.       }
    16.     }
    17.   }
    18. script>
    19. <style>
    20. style>

    mutations.js(存值)：

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

    getters.js(取值)：

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

     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. Vue.use(Router)
    14.  
    15. export default new Router({
    16.   routes: [{
    17.       path: '/',
    18.       name: 'Login',
    19.       component: Login
    20.     },
    21.     {
    22.       path: '/Login',
    23.       name: 'Login',
    24.       component: Login
    25.     },
    26.     {
    27.       path: '/Reg',
    28.       name: 'Reg',
    29.       component: Reg
    30.     },
    31.     {
    32.       path: '/AppMain',
    33.       name: 'AppMain',
    34.       component: AppMain,
    35.       children: [{
    36.           path: '/LeftNav',
    37.           name: 'LeftNav',
    38.           component: LeftNav
    39.         },
    40.         {
    41.           path: '/TopNav',
    42.           name: 'TopNav',
    43.           component: TopNav
    44.         },
    45.         {
    46.           path: '/sys/Articles',
    47.           name: 'Articles',
    48.           component: Articles
    49.         },
    50.         {
    51.           path: '/sys/VuexPage1',
    52.           name: 'VuexPage1',
    53.           component: VuexPage1
    54.         },
    55.         {
    56.           path: '/sys/VuexPage2',
    57.           name: 'VuexPage2',
    58.           component: VuexPage2
    59.         }
    60.       ]
    61.     }
    62.   ]
    63. })

    查看界面效果：

    不点击"盘他"按钮

    页面一：

    页面二：

     点击"盘他"按钮

    页面一：

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

    四、异步同步操作

    VuexPage1.vue：

    2.  
    3. <script>
    4.   export default {
    5.     name: 'VuexPage1',
    6.     data() {
    7.       return {}
    8.     },
    9.     methods: {
    10.       buy() {
    11.         //通过commit方法 会调用 mutations.js中定义好的方法
    12.         this.$store.commit("setResName", {
    13.           resName: '大鸡崽'
    14.         })
    15.       },
    16.       buyAsync() {
    17.         this.$store.dispatch("setResNameAsync", {
    18.           resName: '颜忠鸡'
    19.         })
    20.       }
    21.     },
    22.     computed: {
    23.       msg() {
    24.         //从vue 的state 文件中获取值
    25.         // return this.$store.state.resName;//不推荐，不安全
    26.         //通过 getters.js文件 获取 state.js中定义的变量值
    27.         return this.$store.getters.getResName;
    28.       }
    29.     }
    30.   }
    31. script>
    32. <style>
    33. style>

    actions.js：

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

    效果演示：

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

     我们再点击 “盘它”，

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

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

    五、Vue后台交互

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

    VuexPage1.vue：

    2.  
    3. <script>
    4.   export default {
    5.     name: 'VuexPage1',
    6.     data() {
    7.       return {}
    8.     },
    9.     methods: {
    10.       buy() {
    11.         //通过commit方法 会调用 mutations.js中定义好的方法
    12.         this.$store.commit("setResName", {
    13.           resName: '大鸡崽'
    14.         })
    15.       },
    16.       buyAsync() {
    17.         this.$store.dispatch("setResNameAsync", {
    18.           resName: '颜忠鸡',
    19.           _this:this//通过键传到actions.js里面，获取到
    20.         })
    21.       }
    22.     },
    23.     computed: {
    24.       msg() {
    25.         //从vue 的state 文件中获取值
    26.         // return this.$store.state.resName;//不推荐，不安全
    27.         //通过 getters.js文件 获取 state.js中定义的变量值
    28.         return this.$store.getters.getResName;
    29.       }
    30.     }
    31.   }
    32. script>
    33. <style>
    34. style>

     actions.js

    1. export default {
    2.   setResNameAsync: (context, payload) => {
    3.     //异步修改值 在异步方法中调用了同步方法
    4.     //context指的是Vuex的上下文，相当于this.$store
    5.     setTimeout(function() { //此代码6秒后执行
    6.       context.commit("setResName", payload);
    7.     }, 6000);
    8.  
    9.     //通过payload里 传参的方式获取到vue实例
    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. }

    运行效果：

  • 相关阅读:
    PDF怎么编辑文字？教你两招非常实用的方法
    使用Inno Setup 制作软件安装包详细教程(与开发语言无关)
    前端基础向--从项目入手封装公共组件
    算法 递归
    计算机视觉系列-轻松掌握 MMDetection 中常用算法 ：Cascade R-CNN（三）
    mysql、oracle、sqlsever使用不同案例
    游戏策划笔记：记忆点的构造
    IPC机制
    离线地图二次开发(一套代码支持所有地图源)
    Opencv 基本操作三 实现各个形态学处理并实现多图展示
  • 原文地址：https://blog.csdn.net/weixin_65211978/article/details/126856245