• vuex入门


    有些数据是多个页面共同需要,甚至都会修改的。这时候就需要统一的数据/状态管理,vuejs里面vuex负责。

    基本原理:

      所有数据 都保存在 vuex.State 

      可以直接读取,也可以通过getter 读取的同时作些计算

      不能直接修改数据,需要commit Mutation / dispatch Action 来修改数据

        (理由是响应数据变化,其实响应可以用监听的,监听/双向绑定可是vue强项,这里还是要限制双向绑定,避免数据修改太灵活)

        Mutation 是同步函数,即时的修改 State

        Action在mutation外面包一层,更灵活,例如异步的获得结果,再通过commit mutation修改数据

      如果据只供单个页面使用,但也很复杂,多个函数读取修改,也需要vuex来管理,通过Module分成几个部分,每个部分类似

    基本使用:

      1 引入Vue 并使用 Vue.use(Vuex) 挂到 Vue上

      2 创建 vuex 实例 store,并写好 state/mutation/action等

         const store = new Vuex.Store({state/mutation/action...})

      3 使用 Vue.prototype.$store = store 挂到 Vue上

      ( Vue.prototype.$store和全局引用,同样作用,uniapp官方示例和慕课网教程同时写,不研究了,暂且都写)

      4 全局引入

      const app = new Vue({
        store,
        ...App
      })

      5 读取:

       每个vue页面都可以使用 this.$store.state 直接读取 (响应式,会自动更新)

         也可以在computed 里面包一层,

       更普遍做法是 使用 mapStates 函数,展开到 computed 里面

       更改:

        修改数据 调用 this.$store.dispatch action 或者 this.$store.commit mutation(响应式,会同步到所有用到页面)

       简便写法,使用 mapMutations / mapActions 展开到 methods里面调用

      

  • 相关阅读:
    linux环境下的makefile文件的编写(zz)
    linux 中vim的退格键的使用问题
    Design Complier Synthesis Script Templet
    Synthesis Summary 逻辑综合总结
    .net加密
    timestamp (TransactSQL) 时间戳
    ADO.NET连接池
    ASP.NET Web数据控件
    高效的读取二进制数据
    GridView
  • 原文地址:https://www.cnblogs.com/mitang/p/13642613.html
Copyright © 2020-2023  润新知