• 项目中使用 vuex 实现(状态)数据共享


    一、什么是Vuex

    Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。

    二、项目中引入Vuex

    1. 安装 vuex 依赖包
     npm install vuex --save
    
    1. main.js中导入 vuex 包
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    1. 创建 store 对象
    const store = new Vuex.Store({
     // state 中存放的就是全局共享的数据
     state: { count: 0 }
    })
    
    1. 将 store 对象挂载到 vue 实例中
    new Vue({
     el: '#app',
     render: h => h(app),
     router,
     // 将创建的共享数据对象,挂载到 Vue 实例中
     // 所有的组件,就可以直接从 store 中获取全局的数据了
     store
    })
    

    三、Vuex 的核心概念

    State ,Mutation, Action , Getter
    State :用于存储数据
    Mutation :更新state中的数据(同步)
    Action :在这里异步操作
    Getter :对 Store 中的数据进行加工处理形成新的数据,不改变state中的原数据

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    export default new Vuex.Store({
      State :{},
      Mutation :{},
      Action :{},
      Getter :{}
    })
    
    

    State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储。

     // 创建store数据源,提供唯一公共数据
     const store = new Vuex.Store({
     state: { count: 0 }
     })
    

    组件访问 State 中数据:
    第一种方式:

    this.$store.state.全局数据名称
    

    第二种方式

    1. 从 vuex 中按需导入 mapState 函数
    import { mapState } from 'vuex'
    

    通过刚才导入的 mapState 函数,将当前组件需要的全局数据,映射为当前组件的 computed 计算属性:
    2. 将全局数据,映射为当前组件的计算属性

    computed: {
     ...mapState(['count'])
    }
    

    Mutation 用于变更 Store中 的数据。

    ① 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。
    ② 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
    ③ Mutation中的方法,第一个形参都是 state
    定义 Mutation

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        add(state) {
          // 变更状态
          state.count++;
        }
      }
    });
    

    触发mutation
    方式一:

    methods: {
     handle1() {
        // 触发 mutations 的第一种方式
           this.$store.commit('add')
               }
         }
    

    可以在触发 mutations 时传递参数:

     // 定义Mutation
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        addN(state, step) {
          // 变更状态
          state.count += step;
        }
      }
    });
    

    触发mutation

    methods: {
     handle2() {
     // 在调用 commit 函数,
     // 触发 mutations 时携带参数
     this.$store.commit('addN', 3)
     }
     }
    

    触发 mutations 的第二种方式:

    1. 从 vuex 中按需导入 mapMutations 函数
    import { mapMutations } from 'vuex'
    

    通过刚才导入的 mapMutations 函数,将需要的 mutations 函数,映射为当前组件的 methods 方法:
    2. 将指定的 mutations 函数,映射为当前组件的 methods 函数

    //add,addN就可以当成方法使用了
    methods: {
     ...mapMutations(['add', 'addN'])
    }
    

    Action 主要用于处理异步任务

    如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发
    Mutation 的方式间接变更数据。在action中,不能直接修改 state 中的数据,必须通过 context.commit() 触发某个 mutation 才行

    定义 Action

     const store = new Vuex.Store({
      // ...省略其他代码
      mutations: {
        add(state) {
          state.count++;
        }
      },
      actions: {
        addAsync(context) {
          setTimeout(() => {
            context.commit("add");
          }, 1000);
        }
      }
    });
    

    触发 Action 方式一:this.$store.dispatch('Action中定义的方法名称')

     methods: {
     handle() {
     // 触发 actions 的第一种方式
     this.$store.dispatch('addAsync')
     }
     }
    

    触发 actions 异步任务时携带参数:

     const store = new Vuex.Store({
      // ...省略其他代码
      mutations: {
        addN(state, step) {
          state.count += step;
        }
      },
      actions: {
        addNAsync(context, step) {
          setTimeout(() => {
            context.commit("addN", step);
          }, 1000);
        }
      }
    });
    
    

    触发 Action

     methods: {
     handle() {
     // 在调用 dispatch 函数,
     // 触发 actions 时携带参数
     this.$store.dispatch('addNAsync', 5)
     }
     }
    

    触发 actions 的第二种方式:

    1. 从 vuex 中按需导入 mapActions 函数
    import { mapActions } from 'vuex'
    

    通过刚才导入的 mapActions 函数,将需要的 actions 函数,映射为当前组件的 methods 方法:
    2. 将指定的 actions 函数,映射为当前组件的 methods 函数

    methods: {
     ...mapActions(['addASync', 'addNASync'])
    }
    

    Getter 用于对 Store 中的数据进行加工处理形成新的数据。

    ① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。
    ② Store 中数据发生变化,Getter 的数据也会跟着变化。
    定义 Getter

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      getters: {
        showNum: state => {
          return "当前最新的数量是【" + state.count + "】";
        }
      }
    });
    

    使用 getters 的第一种方式:

    this.$store.getters.名称
    

    使用 getters 的第二种方式:

    import { mapGetters } from 'vuex'
    computed: {
     ...mapGetters(['showNum'])
    }
    

    总结:

    1、使用 Vuex 统一管理状态的好处:

    ① 能够在 vuex 中集中管理共享的数据,易于开发和后期维护
    ② 能够高效地实现组件之间的数据共享,提高开发效率
    ③ 存储在 vuex 中的数据都是响应式的,能够实时保持数据与页面的同步

    2、触发vuex中的4个的对象都有2中方式

    方式一:

    State       this.$store.state.全局数据名称
    Mutation    this.$store.commit('Mutation中的方法名')
    Ation       this.$store.dispatch('Action中的方法名')
    Getters     this.$store.getters.名称
    

    方式二:
    组件中导入

    import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
    

    直接在 计算属性或者methods 中使用展开运算符/扩展运算符(...)就可以了

     computed: {
        ...mapState(['count']),
        ...mapGetters(['showNum'])
      },
      methods: {
        ...mapMutations(['sub', 'subN']),
        ...mapActions(['subAsync', 'subNAsync']),
      }
    

    以上代码中 countshowNum可以直接当成计算属性使用,而subsubNsubAsyncsubNAsync可以直接当成方法使用

    3、特别注意:

    ① 不要在组件中直接使用 this.$store.state.全局数据名称取更改 state中的数据,如果直接更改,调试工具监测不到数据更改
    ② 只有 mutations 中定义的函数,才有权利修改 state 中的数据,不要在 mutations 函数中,执行异步操作(调试工具监测不到数据更改)
    ③ 在 actions 中,不能直接修改 state 中的数据,必须通过 context.commit() 触发某个 mutation 才行

  • 相关阅读:
    服务端实现url网页截屏、HTML保存为高质量PDF[puppeteer]
    网页保存为图片[rasterizeHTML]
    SortedList<T,K>,SortedDictionary<T,K>,Dictionay<T,K>用法区别
    svn实现类似git stash及git stash pop的功能
    MSBuild报错及找不到AxImp.exe或LC.exe问题
    记一个ios下text-overflow: ellipsis 与 text-align: justify 冲突的问题
    Chrome devtools inspect后打开空白解决办法
    Oracle长时间使用导致连接变慢且频繁报无法找到监听程序的错误
    vscode+vue不得不用的插件和不得不添加的配置
    初识vscode+vue
  • 原文地址:https://www.cnblogs.com/qingheshiguang/p/14840746.html
Copyright © 2020-2023  润新知