zoukankan      html  css  js  c++  java
  • vuex总结

     
    1、是什么
     
    Vuex是专为Vue应用设计的状态管理模式(状态管理库)。采用集中式存储管理应用的所有组件的状态.
     
    状态子管理包括: state(驱动应用的数据源) ,   view(以声明方式将state映射到视图),   action(响应在view层的用户输入导致的状态变化)
     
     
    2、何时用
     
    vuex帮助我们管理共享状态,但是也附加了更多概念,框架。需要综合权衡短期和长期效益。 如果应用很简单,能不用vuex就不用,
     
    (多层嵌套的组件,兄弟组件之间的状态传递)这种情况下,要把组件的共享状态抽取出来,以一个全局单例模式管理。通过定义和隔离状态管理中的各种概念(state,mutations,actions)并强制遵守一定的规则,代码将会变得更结构化且易维护。这样你在阅读代码的时候能更容易地解读应用内部的状态改变。
     
    如果有些状态严格属于单个组件,最好还是作为组件的局部状态。
     
     
    3、store模式
     
    4、vuex和单纯的全局对象有何区别
     
    a、Vuex的状态存储是响应式的。 b、不可以直接改变store中的状态,只能通过显示地提交(commit) mutation.
     
     
    5、怎么用
     
    a、安装Vuex,创建store(提供初始state和一些mutation),还要确保使用Vue.use(Vuex)
    b、获取状态对象: store.state
    c、触发状态变更:store.commit(‘mutation的名字’)
     
     
    d、在组件中调用store中的状态:在计算属性computed中返回某个状态
    如:computed: {
        count () {
          return store.state.count
          // return this.$store.state.count  //改进方式
        }
      }
     
    以上做法的缺点:
    注意⚠️: 在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到,别忘了use(Vuex)。
     
     
    e、在组件中触发变化:在组件的methods中提交mutation。
     
     
    如何将状态和状态变更事件分布到各个子模块中
     
    computed
     
    6、核心概念—state
     
    a、state
    b、mapState辅助函数:当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余,为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。
     
                 ⚠️:当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
                
       如:
                 computed: mapState([
                    'count'    // 映射 this.count 为 store.state.count
                 ])
     
    c、对象展开运算符(…):mapState 函数返回的是一个对象。
                 let n = { x, y, ...z };
                 n; // { x: 1, y: 2, a: 3, b: 4 }
     
     
    7、核心概念—Getter
     
    a、getter
     
       使用场景:当需要从 store 中的 state 中派生出一些状态。(Getter 接受 state 作为其第一个参数)
     
       理解:可以认为是 store的计算属性。(就像计算属性一样,getter的返回值回根据他的依赖被缓存起来,只有依赖值改变--->store的计算属性重新计算。
     
       访问方式:通过属性访问,store.getters.gertter’sname
            通过方法访问,让 getter 返回一个函数,来实现给 getter 传参。(⚠️:getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果)
     
    如:
     
    getters: {
      // ...
      doneTodosCount: (state, getters) => {  //Getter 也可以接受其他 getter 作为第二个参数
        return getters.doneTodos.length
      }
    }
     
     
    computed: {
      doneTodosCount () {
        return this.$store.getters.doneTodosCount
      }
    }
     
     
    b、mapGetters辅助函数:将store中的getter映射到局部计算属性
     
     
     
     
    8、核心概念—mutation
     
    a、 作用: 更改Vuex的store中的状态的唯一方法。(类似于methods)   
     
        如何定义:一个字符串的事件类型&一个回掉。
     
    如:const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        increment (state) {
          // 变更状态
          state.count++
        }
      }
    })
     
    提交方式:store.commit('mutation名字’);
     
     
     
    b、提交载荷(载荷即额外的参数,通常是个对象) 载荷方式
     
    mutations: {
      increment (state, n) {
        state.count += n
      }
    }
     
    对象风格的提交方式:
    如:store.commit({
      type: 'increment',
      amount: 10
    })
     
     
    c、使用mutation应该注意什么:
       最好提前在你的 store 中初始化好所有所需属性;
       当需要在对象上添加新属性时,你应该 使用 Vue.set(obj, 'newProp', 123),  或者:以新对象替换老对象。如state.obj = { ...state.obj, newProp: 123 }
       mutation必须是同步函数
     
     
     
    9、核心概念—action
     
    作用:action类似于mutation
    不同点:action提交mutation,不是直接变更状态;且action可以包含任何异步操作。
     
    触发action: store.dispath(‘action名字')
     
     
     
     
     
     
     
  • 相关阅读:
    linux下的grep命令
    linux下的ps命令
    删除eclipse无效的工作空间路径
    js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别
    javascript中的function 函数名(){} 和 函数名:function(){}有什么不同
    Python之路-python(css布局、JavaScript)
    Python之路-python(css、JavaScript)
    Python之路-python(html、css)
    Python之路-python(堡垒机)
    Python之路-python(mysql介绍和安装、pymysql、ORM sqlachemy)
  • 原文地址:https://www.cnblogs.com/catherLee/p/10033245.html
Copyright © 2011-2022 走看看