• Vuex的使用

    目录

    一、Vuex简介

    Vuex分为五个部分

    核心组件

    store

    state

    getters(getXxx)

    mutations(setXxx)

          actions

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

    vuex使用步骤

    加载依赖  npm install vuex -S 下载Vuex最新版本的依赖

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

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

    测试Vuex的存储变量的功能 

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

    四、Vuex中的异步同步操作

    五、Vuex后台交互

    一、Vuex简介

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

    Vuex分为五个部分

      1.State：单一状态树

       2.Getters：状态获取

       3.Mutations：触发同步事件

       4.Actions：提交mutation，可以包含异步操作

       5.Module：将vuex进行分模块

    核心组件

     vuex的核心概念：store、state、getters、mutations、actions

    store

    每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

    1.  const store = new Vuex.Store({
    2.        state,    // 共同维护的一个状态，state里面可以是很多个全局状态
    3.        getters,  // 获取数据并渲染
    4.        actions,  // 数据的异步操作
    5.        mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
    6.       })

    state

    (保存数据的容器)状态，即要全局读写的数据
     

    1.      const state = {
    2.         resturantName:'飞歌餐馆'
    3.       };
    4.  
    5.       this.$store.state.resturantName;//不建议

    getters(getXxx)

    获取数据并渲染

    1.      const getters = {
    2.        resturantName: (state) => {
    3.          return state.resturantName;
    4.        }
    5.      }; 

         注1：getters将state中定义的值暴露在this.$store.getters对象中，我们可以通过如下代码访问
             

     this.$store.getters.resturantName

         注2：state状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：
           

    1.   computed: {
    2.             resturantName: function() {
    3.               return this.$store.getters.resturantName;
    4.             }
    5.           }


    mutations(setXxx)

    处理数据的唯一途径，state的改变或赋值只能在这里

       

    1.   export default {
    2.         // type(事件类型)： 其值为setResturantName
    3.         // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器
    4.     setResturantName: (state, payload) => {
    5.           state.resturantName = payload.resturantName;
    6.     }
    7.       }

          注1：mutations中方法的调用方式
               不能直接调用this.$store.mutations.setResturantName('KFC')，必须使用如下方式调用：
         

    1.      this.$store.commit(type,payload);
    2.  
    3.            // 1、把载荷和type分开提交
    4.            store.commit('setResturantName',{
    5.              resturantName:'KFC'
    6.            })
    7.  
    8.            // 2、载荷和type写到一起
    9.           store.commit({
    10.             type: 'setResturantName',
    11.             resturantName: 'KFC'
    12.           })

               
          注2：一定要记住，Mutation 必须是同步函数。为什么呢？异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了
               如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了
             

    1.   mutations: {
    2.             someMutation (state) {
    3.               api.callAsyncMethod(() => {
    4.                 state.count++
    5.               })
    6.             }
    7.            } 

          
    actions

    数据的异步(async)操作
     

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

    vuex使用步骤

    加载依赖  npm install vuex -S 下载Vuex最新版本的依赖

    注意本篇博客所使用的版本不同： npm i -S vuex@3.6.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

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

    测试Vuex的存储变量的功能 

    state.js

    1. export default {
    2.   resName:'aaaaa'
    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. Vue.use(Router)
    14.  
    15. export default new Router({
    16.   routes: [
    17.     {
    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.         {
    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.     }
    59.   ]
    60. })

    VuexPage1.vue 

    1. <template>
    2.   <div>
    3.     <p>页面1：欢迎来到{{msg}}p>
    4.     <button @click="buy">盘它button>
    5.   div>
    6. template>
    7.  
    8. <script>
    9.   export default {
    10.     name: 'VuexPage1',
    11.     data() {
    12.       return {
    13.  
    14.       }
    15.     },
    16.     methods: {
    17.       buy() {
    18.         // 通过commit方法 会调用mutations.js文件中定义好的方法
    19.         this.$store.commit("setResName", {
    20.           resName: 'KFC'
    21.         })
    22.       }
    23.     },
    24.     computed: {
    25.       msg() {
    26.         // 从vuex的state文件中获取值
    27.          return this.$store.state.resName;
    28.         
    29.       }
    30.     }
    31.   }
    32. script>
    33.  
    34. <style>
    35. 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对象参数
    5.     state.resName=payload.resName;
    6.   }
    7. }

    getters.js

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

     运行：

     

     

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

    四、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方法 会 调用 mutations.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.   }
    12. }

     运行

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

     

    6s后 

     

     

    五、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

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

     

  • 相关阅读:
    java基础:异常篇
    6.1 - OSI/RM七层模型、TCP/IP四层模型
    企业级C++项目那些事（2）：Qt相关基础概念
    &2_机器学习分类
    FL Studio All Plugins Edition2024中文完整版Win/Mac
    *** stack smashing detected ***: terminated
    程序设计综合实践 2.1
    【数据结构】内部排序小结- -归并排序
    Ubuntu 20.04 LTS配置JDK、Git
    django REST framework-使用与不使用的区别？
  • 原文地址：https://blog.csdn.net/m12120426/article/details/126884209