• Vuex的使用

    目录

    一、Vuex的核心组成

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

    版本问题

    store/index.js

    router/index.js

    main.js

    state.js

    VuexPage1.vue

    效果

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

    mutations.js

    getters.js

     VuexPage1.vue

    效果1

      VuexPage2.vue

    router/index.js

    效果2

    四、Vuex中同步异步的操作

     actions.js

    VuexPage1.vue

    效果

    五、Vuex后台交互

      VuexPage1.vue

    actions.js

    效果

    一、Vuex的核心组成

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

    版本问题

     此时运行的是npm install vuex -S  对应的版本是4.0.2 因为和vuex不兼容 所以会报错

    换成npm i -S vuex@3.6.2

     

     就能用了

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

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

    main.js

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. //process.env.MOCK  为false，那么require('@/mock')不执行  process.env.MOCK 在生产环境下为false
    5. //process.env.MOCK && require('@/mock') 因为与后台建立连接，不是用mock模拟数据了
    6. import ElementUI from 'element-ui' // 新添加 1
    7. import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式不同，要放在import App from './App'; 之前
    8. import App from './App'
    9. import router from './router'
    10. import axios from '@/api/http' // #vue项目对axios的全局配置    
    11. //import axios from 'axios'  
    12. import VueAxios from 'vue-axios'
    13. import store from './store'
    14.  
    15. Vue.use(ElementUI)   // 新添加 3 使用ElementUI
    16. Vue.use(VueAxios,axios)
    17. Vue.config.productionTip = false
    18.  
    19. /* eslint-disable no-new */
    20. new Vue({
    21.   el: '#app',
    22.   data(){
    23.     return{
    24.       Bus:new Vue({//总线
    25.  
    26.       })
    27.     }
    28.   },
    29.   router,
    30.   store,
    31.   components: { App },
    32.   template: ''
    33. })

    state.js

    1. export default {
    2.   resName:'小陈餐馆'
    3. };

    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.         //从vue的state文件中获取值
    17.       return this.$store.state.resName;
    18.     }
    19.   }
    20. }
    21. script>
    22.  
    23. <style>
    24. style>

    效果

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

    mutations.js

    1. export default {//修改变量值 同步
    2.     setResName:(state,payload)=>{
    3.         //state对象就对应了state.js中的对象
    4.         //payload载荷对应的传递的Jason对象参数
    5.         state.resName = payload.resName;
    6.     }
    7. };

    getters.js

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

     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:'KFC'
    15.         })
    16.     }
    17.   },
    18.   computed:{
    19.     msg(){
    20.      //从vue的state文件中获取值
    21.      // return this.$store.state.resName; 不推荐不安全
    22.      //通过getters.js获取state.js中定义的变量值
    23.      return this.$store.getters.getResName;
    24.     }
    25.   }
    26. }
    27. script>
    28.  
    29. <style>
    30. style>

    效果1

     

      VuexPage2.vue

    2.  
    3. <script>
    4. export default {
    5.   name: 'VuexPage2',
    6.   data () {
    7.     return {
    8.     }
    9.   },
    10.   computed:{
    11.     msg(){
    12.      //从vue的state文件中获取值
    13.      // return this.$store.state.resName; 不推荐不安全
    14.      //通过getters.js获取state.js中定义的变量值
    15.      return this.$store.getters.getResName;
    16.     }
    17.   }
    18. }
    19. script>
    20.  
    21. <style>
    22. 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.  
    15. Vue.use(Router)
    16.  
    17. export default new Router({
    18.   routes: [{
    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.           path: '/LeftNav',
    39.           name: 'LeftNav',
    40.           component: LeftNav
    41.         },
    42.         {
    43.           path: '/TopNav',
    44.           name: 'TopNav',
    45.           component: TopNav
    46.         }
    47.         ,{
    48. 					path: '/sys/Articles',
    49. 					name: 'Articles',
    50. 					component: Articles
    51. 				}
    52.         ,{
    53. 					path: '/sys/VuexPage1',
    54. 					name: 'VuexPage1',
    55. 					component: VuexPage1
    56. 				}
    57.         ,{
    58. 					path: '/sys/VuexPage2',
    59. 					name: 'VuexPage2',
    60. 					component: VuexPage2
    61. 				}
    62.       ]
    63.     }
    64.   ]
    65. })

    效果2

    四、Vuex中同步异步的操作

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

    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: "KFC"
    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.  
    33. <style>style>

    效果

    点击最终店长 等6秒变为如下图

     点击角色管理

    五、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: "KFC"
    14.       });
    15.     },
    16.     buyAsync() {
    17.       this.$store.dispatch("setResNameAsync", {
    18.         resName: "华莱士",
    19.         _this:this
    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.  
    34. <style>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.     //vuex后台交互
    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. };

    效果

     注意：必须是_this 而不能是this，若直接用this会拿不到axios

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

    总结：

    ①下载vuex的依赖 npm install vuex -S 是最新版本 4.0.2

    我们需要是npm i -S vuex@3.6.2

    ②导入vuex核心的四个组件，通过index.js加载进来

    ③将vuex对应的index.js挂载到main.js的vue实例中

    ④测试vuex的存储变量的功能

  • 相关阅读:
    vim复制代码包含注释时格式会乱掉的解决办法
    C++中的cout.setf(ios::fixed)是什么意思？
    uniapp怎么进行页面的跳转
    JavaSE 基础（十三）网络编程
    React Hooks—— context hooks
    分布式系统的 38 个知识点
    Linux学习之：进程概念
    Springboot 指定自定义模板导出Excel文件
    股票接口的推出对于散户有哪些意义？
    AtCoder Beginner Contest 354 （ABCDEFG题）视频讲解
  • 原文地址：https://blog.csdn.net/weixin_62735525/article/details/126857554