• 快速上手Vuex

    目录

    前言：

     why:(为什么要使用Vuex)

    1.Vuex的核心组成

    1.1图解Vue各组件

     1.2 核心组件

    state.js 存储变量

    Getters.js 获取变量值

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

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

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

    2.1 安装：

     npm install vuex -S

    npm i -S vuex@3.6.2

    2.2 使用Vuex的步骤

     2.2.1 下载依赖 npm install vuex -s  下载Vuex最新版本的依赖（注意）

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

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

    2.2.4.测试Vue的存储变量的功能

    3.Vue中的设置及获取变量值

    4.Vue中的异步同步操作

    5.Vue后台交互

    前言：

     why:(为什么要使用Vuex)

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

    组件传参

    1.子传父  $emit，父传子 props

    2.总线

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

    1.Vuex的核心组成

    1.1图解Vue各组件

    由四个部分组成

     1.2 核心组件

    state.js 存储变量

    Getters.js 获取变量值

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

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

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

    2.1 安装：

     npm install vuex -S

    npm i -S vuex@3.6.2

    下载完成,打开 package.json查看版本为：4.0.2

     然后我们开始使用它

    2.2 使用Vuex的步骤

    2.2.1 下载依赖 npm install vuex -s  下载Vuex最新版本的依赖（注意）

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

             index.js

            state.js

            actions.js

            mutations.js

            getters.js

     2.2.1 下载依赖 npm install vuex -s  下载Vuex最新版本的依赖（注意）

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

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

    2.2.4.测试Vue的存储变量的功能

    启动后端

     启动前端

     打开项目的用户管理：路径为 localhost:8083/#/sys/VuexPage1

    新建一个页面用作于用户管理

    /sys/VuexPage1

    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.         //从vuex的state 文件中获值
    17.         return this.$store.state.resName;
    18.         //this.$router.push()..
    19.         //this.$root.But.$on()
    20.       }
    21.     }
    22.   }
    23. script>
    24.  
    25. <style>
    26. style>

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

     state.js

     

     再次打开项目查看，内容并没有展示

     在页面点击F12查看报错，发现$store未定义

    不同浏览器可能错误提示有所差异，也可能是

     

    我们查看代码中的报错部分，为了排查错误，我们将报错的代码先注释，然后返回一个常量

     返回网页：内容出现了

     此时我们之前所有的操作都是正确的，但是为什么会发生这种情况呢？

    小刘在网上搜索了很多的资料 发现有可能是版本的问题

    此时我们下载  npm i -S vuex@3.6.2 版本

     

     此时我们的版本就已经发生了改变，然后我们重新使用指令 npm run dev 启动项目

     此时，我们的效果就出来了！！！

    以上就是关于版本方面的问题，大家如果遇到这种情况也可以向这方面思考

    3.Vue中的设置及获取变量值

    更改VuePage1.Vue:

    2.  
    3. <script>
    4.   export default{
    5.     name:'VuexPage1',
    6.     data(){
    7.       return {
    8.       }
    9.     },
    10.     methods:{
    11.       buy(){
    12.          console.log(this.$store);
    13.         //通过commit 方法 会调用 mutations.js文件中定义好的方法
    14.         this.$store.commit("setResName",{
    15.           resName:'KFC'
    16.         })
    17.       }
    18.     }
    19.     ,
    20.     computed:{
    21.       msg(){
    22.         console.log(this.$store);
    23.         //从vuex的state 文件中获值
    24.         // return this.$store.state.resName;//不推荐 不安全
    25.         //通过 getter.js 文件获取 state.js 中定义的变量值
    26.          return this.$store.getters.getResName;
    27.         // return 'xxx';
    28.         // //this.$router.push()..
    29.         //this.$root.But.$on()
    30.       }
    31.     }
    32.   }
    33. script>
    34.  
    35. <style>
    36. style>

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

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

    查看界面效果：

    页面1：

     页面2：

     当页面1点击了按钮之后：页面1发生变化

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

    4.Vue中的异步同步操作

    VuexPage1.vue：

    2.  
    3. <script>
    4.   export default{
    5.     name:'VuexPage1',
    6.     data(){
    7.       return {
    8.       }
    9.     },
    10.     methods:{
    11.       buy(){
    12.          console.log(this.$store);
    13.         //通过commit 方法 会调用 mutations.js文件中定义好的方法
    14.         this.$store.commit("setResName",{
    15.           resName:'KFC'
    16.         })
    17.       },
    18.       buyAsync(){
    19.         this.$store.dispatch("setResNameAsync",{
    20.           resName:'麦当劳'
    21.         })
    22.       }
    23.     }
    24.     ,
    25.     computed:{
    26.       msg(){
    27.         console.log(this.$store);
    28.         //从vuex的state 文件中获值
    29.         // return this.$store.state.resName;//不推荐 不安全
    30.         //通过 getter.js 文件获取 state.js 中定义的变量值
    31.          return this.$store.getters.getResName;
    32.         // return 'xxx';
    33.         // //this.$router.push()..
    34.         //this.$root.But.$on()
    35.       }
    36.     }
    37.   }
    38. script>
    39.  
    40. <style>
    41. style>

    actions.js：

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

    效果演示：

    先点击最终店长，此时会没有反应

     我们再点击 “盘它”，

     可以看到的现象：在点击了最终店长的六秒之后，会切换为“麦当劳”

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

    5.Vue后台交互

    actions.js:

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

    VuexPage1.vue

     获取到后台数据：

  • 相关阅读:
    redis 安装
    PMP每日一练 | 考试不迷路-11.12（包含敏捷+多选）
    纯 CSS 实现瀑布流布局的方法
    七、商城（中级）项目报错汇总
    C++进阶--2
    疯狂星期四，但是程序员
    Http和Https
    微服务节流控制：Eureka中服务速率限制的精妙配置
    Part7:Pandas 的SettingWithCopyWarning 报警复现、原因、解决方案
    STM32单片机学习3--STM32控制键盘
  • 原文地址：https://blog.csdn.net/weixin_64313980/article/details/126855439