zoukankan      html  css  js  c++  java
  • mvc框架 与vuex的介绍

    应用级的状态集中放在store中;
    改变状态的方式是提交mutations,这是个同步的事物;
    异步逻辑应该封装在action中。

    const vuex_store = new Vuex.store({
      state:{
        xxx:oooo; // 定义你的数据源
      }
    })

    npm install vuex --save-dev
    它必须以插件的方式进行引用:
    import Vuex from 'vuex';
    Vue.use(Vuex);

    state,驱动应用的数据源;(vue实例化出来的状态)
    view,以声明方式将state映射到视图;(视图 template呈现的模板)
    actions,响应在view上的用户输入导致的状态变化。(methods的行为 状态变化)

    Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。Getters 接受 state 作为其第一个参数:

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:
    每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
    这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
    当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:
    向 store.commit 传入额外的参数,即 mutation 的 载荷(payload)在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读

    提交 mutation 的另一种方式是直接使用包含 type 属性的对象:

    store.commit({
      type: 'increment',
          amount: 10
    })

    当使用对象风格的提交方式,整个对象都作为载荷传给 mutation 函数,因此 handler 保持不变:

    mutations: {
      increment (state, payload) {
          state.count += payload.amount
      }
    }

    最好提前在你的 store 中初始化好所有所需属性。

    当需要在对象上添加新属性时,你应该

    使用 Vue.set(obj, 'newProp', 123), 或者 -

    以新对象替换老对象。例如,利用 stage-3 的对象展开运算符我们可以这样写:

    state.obj = { ...state.obj, newProp: 123 }

    (常用)
    使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然:

    // mutation-types.js
    export const SOME_MUTATION = 'SOME_MUTATION'
    // store.js
    import Vuex from 'vuex'
    import { SOME_MUTATION } from './mutation-types'

    const store = new Vuex.Store({
      state: { ... },
      mutations: {
        // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
        [SOME_MUTATION] (state) {
          // mutate state
        }
      }
    })

    一条重要的原则就是要记住 mutation 必须是同步函数

    mutations: {
      someMutation (state) {
        api.callAsyncMethod(() => {
        state.count++
        })
      }
    }

    你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

    import { mapMutations } from 'vuex'

    export default {
      // ...
      methods: {
        ...mapMutations([
          'increment' // 映射 this.increment() 为 this.$store.commit('increment')
        ]),
        ...mapMutations({
          add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
        })
      }
    }

    在 Vuex 中,mutation 都是同步事务:

    store.commit('increment')
    // 任何由 "increment" 导致的状态变更都应该在此刻完成。


    Actions 支持同样的载荷方式和对象方式进行分发:

    // 以载荷形式分发
    store.dispatch('incrementAsync', {
      amount: 10
    })

    // 以对象形式分发
    store.dispatch({
      type: 'incrementAsync',
      amount: 10
    })

    对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象。
    模块内部的 action,局部状态通过 context.state 暴露出来, 根节点状态则为 context.rootState

    如果希望你的模块更加自包含或提高可重用性,你可以通过添加 namespaced: true 的方式使其成为命名空间模块。
    当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

    原生事件在router-link中加.native才能生效,而a标签就不用
    意思就是当你给一个vue组件绑定事件时候,要加上native!如果是普通的html元素!就不需要

    vuex大体可以看作四步,第一到action里面查到这个事件的触发,然后立马是mutaction里面查看对应处理,第三步改变store的状态,第四部getter视图渲染;

    vuex三个关键词:action,mutation,store,中文意思:活动的,突变的,储存的,注意action,mutation,getter都必须是函数

    mvc框架
    M:模型用于表示各种事物及事物特性的数据
    v:view + viewModel,此处鄙人认为v不能单纯的理解为视图,而应该是视图+视图模型。
    c:控制器,用于协调M与v之间的关系。

    flux(单向数据流)
    actions:一个动作,可以是view创建的,也可以是程序其他逻辑创建的
    dispatcher:将业务逻辑与用户界面分离,负责响应action动作事件,并意向传遍整个系统
    store:业务逻辑处理
    view:视图
    vuex是借鉴了flux、redux、The Elm Architecture等相关思想。

  • 相关阅读:
    LeetCode 623. Add One Row to Tree
    LeetCode 894. All Possible Full Binary Trees
    LeetCode 988. Smallest String Starting From Leaf
    LeetCode 979. Distribute Coins in Binary Tree
    LeetCode 814. Binary Tree Pruning
    LeetCode 951. Flip Equivalent Binary Trees
    LeetCode 426. Convert Binary Search Tree to Sorted Doubly Linked List
    LeetCode 889. Construct Binary Tree from Preorder and Postorder Traversal
    LeetCode 687. Longest Univalue Path
    LeetCode 428. Serialize and Deserialize N-ary Tree
  • 原文地址:https://www.cnblogs.com/lhl66/p/7381799.html
Copyright © 2011-2022 走看看