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

    目录

    一、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：

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

    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.  
    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.     }
    60.   ]
    61. })

    VuexPage1.vue：

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

    运行：

     

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

     VuexPage2.vue：

    2.  
    3. <script>
    4. export default {
    5.   name: 'VuexPage2',
    6.   data () {
    7.     return {
    8.     }
    9.   },
    10.  
    11.   computed:{
    12.     msg(){
    13.     //  从vuex的state文件中获取值
    14.     //   return this.$store.state.resName;——>不推荐，不安全
    15.     //  通过getters.js文件获取state.js中定义的变量值
    16.       return this.$store.getters.getResName;
    17.     }
    18.   }
    19. }
    20. script>
    21.  
    22. <style scoped>
    23.  
    24. 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:(state,payload)=>{
    3.   //  state对象就对应了state.js中的对象
    4.   //  payload载荷 对应的 传递的 json对象参数{name:zs,age:24}
    5.     state.resName=payload.resName;
    6.   }
    7. }

    getters.js：

    1. export default {
    2.   getResName:(state)=>{
    3.     return state.resName;
    4.  
    5.   }
    6. }

    运行：

    （角色管理）VuexPage2.vue:

     如果点击按钮之后：

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

     

    四、Vuex中的异步同步操作

    VuexPage1.vue：

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

    效果演示：

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

     

    时隔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. }
    19.

     

     VuexPage1.vue：

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

    运行：

    Vuex后台交互完成！

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

  • 相关阅读:
    flask 和fastdeploy 快速部署 yolov3
    查询ES之细化需求实现多字段、范围过滤、加权和高亮
    FastestDet---模型训练
    vim的使用快捷键之删除、复制、粘贴
    微服务分布式springcloud的体育场地预约系统演kdm1z
    C++学习记录(三)
    起号1个月后，我分析了一些AI数字人项目的红利期和优缺点
    centos7 配置Nginx 启动 停止
    CPT205-Computer Graphics
    使用Redis源码探究字符串的实现
  • 原文地址：https://blog.csdn.net/weixin_65808248/article/details/126855136