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等相关思想。

  • 相关阅读:
    UITableView cell中label自动换行和自定义label自动换行
    IOS Label 自动换行 IOS6和IOS7
    AFNetWorking Request failed: unacceptable content-type: text/html
    IOS程序内发短信 MFMessageComposeViewController
    python--(常用模块-2序列化)
    python--(常用模块-1)
    小学生绞尽脑汁也学不会的python(异常,约束,MD5加密,日志处理)
    小学生绞尽脑汁也学不会的python(反射)
    小学生绞尽脑汁也学不会的python(面对对象-----类与类之间的关系)
    小学生绞尽脑汁也学不会的python(面对对象-----成员)
  • 原文地址:https://www.cnblogs.com/lhl66/p/7381799.html
Copyright © 2011-2022 走看看