vuex 使用文档小结篇

Vuex是什么?

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel调试、状态快照导入导出等高级调试功能。

安装

直接下载CDN 引用

  <script src="/path/to/vue.js"></script>
  <script src="/path/to/vuex.js"></script>

npm 

npm install vuex --save

在一个模块化的打包系统中,您必须显式地通过Vue.use() 来安装Vuex。  

import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex) 

  Vuex 是一个专为Vue.js 应用程序开发 的状态管理模式,集中式存储管理应用的所有组件状态。

  状态管理包含以下几个部分状态:

     state 驱动应用的数据源;

    view 以生命方式将 state 映射到视图。

    actions  响应在view 上的用户书输入导致的状态变化。

帮助我们管理共享状态,中大型单页面应用。

  state

    单一状态树 ,Vuex使用单一状态树用一个对象就包含了全部的应用层级状态。

    在Vue 组件中获得Vuex 状态。

    由于Vuex的状态存储是响应式的,从store 实例中读取状态最简单的方法

    就是在计算属性中返回某个状态。

    创建一个Counter 组件   

 const Counter = {
        template: '<div>{{ count }}</div>'
        computed: {
          count (){
            return store.state.count
          }
        }
      }

  每次 store.state.count 变化的时候,都会重新求取计算属性,并且触发更新相关的DOM

    Vuex 通过 store 选项,提供了一种机制将状态从根组件『注入』到每一个子组件中(需调用 Vue.use(Vuex)):     

 const app = new Vue({
        el:'#app',
        // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所 有的子组件
        store,
        components: {Counter},
      template: '
        <div class="app">
          <counter></counter>
        </div>
        '
      })

  通过在根实例中注册 store 选项,该store 实例会注册入到跟组件下的所有子组件,且子组件能通过 this.$store 访问到。更新 counter 的实现:     

 const Counter = {
        template : '<div>{{ count }}</div>',
        computed: {
          count this.$store.state.count
          }
      }

    mapState 辅助函数

      当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些冗余。

      为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性。      

// 在单独构建的版本中辅助函数为 Vuex.mapState
      import { mapState } from 'vuex'
        export default {
          computed: mapState({
            // 箭头函数可以使代码更简洁
              count: state => state.count,
            // 传字符串参数 ‘count' 等同于 ‘state => state.count'
              countAlias: 'count',
            // 为了能够使用 ‘this' 获取局部状态,必须使用常规函数
              countPlusLocalState(state) {
                  return state.count + this.localCount
                }
            })
         }

    当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。          

computed: mapState([
            // 映射 this.count 为 store.state.count
            'count'
          ])

    组件仍然保有局部状态。

    Getters

      有时候我们需要从store 中的state 中 的state 中派生一些状态,列如对列表进行过滤并计算。 

    computed: {
        doneTodosCount() {
            return this.$store.state.todos.filter(todo => todo.done).length
        }
      }

    Vuex 允许我们再store 中定义getters (可以认为是stroe 的计算属性)

      Getters 接受state 作为其第一个参数。        

const store = new Vuex.Store({
            state: {
              todos:[
                {id:1, text: '...' ,done: true},
                {id:2,text:'...',done: false}
              ]
            },
          getters: {
            doneTodos: state => {
                return state.todos.filter(todo=> todo.done)
              }
            }
          })

    Getters 会暴露为store.getters 对象:   

 store.getters.doneTodos // [{id:1,text: '...',done:true}]

    Getter 也可以接受其他getters 作为第二个参数:     

getters: {
          doneTodosCount: (state,getters) => {
            return getters.doneTodos.length
          }
      }
    store.getters.doneTodosCount // -> 1

      我们可很容易的在任何组件中使用       

 computed: {
          doneTodosCount() {
            return this.$store.getters.doneTodosCount
        }
      }

    mapGetters 辅助函数

    mapGetters 辅助函数仅仅是 store 中的getters 映射到局部计算属性。      

import {mapGetter} form 'vuex'
      export default {
        computed: {
          // 使用对象展开运算符将 getters 混入
          ...mapGetters([
              ‘doneTodosCount',
              'anotherGetter'
            ])
          }
        }

  如果你想讲一个getter 属性另取名字,使用对象性时

mapGetters({
         // 映射 this.doneCount 为 store.getters.doneTodosCount
          doneCount: 'doneTodosCount'
      })

          Mutations

        更改Vuex 的store 中的状态的唯一方式就是提交 mutation Vuex 中的mutation

        非常类似于事件,每个 mutation 都有一个字符串的 事件类型 和回调函数。这个回调函数就是我们实际进行状态更改的地方。并且他会接受 state 作为第一个参数。    

const store = new Vue.Store({
        state: {
            count: 1
        },
      mutations: {
          inctement (state) {
          state.count++
        }
      }
    })

  当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个

    mutation handler,你需要以相应的 type 调用 store.commit 方法      

store.commit('increment')

      提交载荷(Payload)

      你可以向store.commit 传入额外的参数,即mutation 的载荷:            

mutations: {
          increment (state, n) {
          state.count += n
        }
      }
      store.commit('increment', 10)

  在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录 mutation会更易读。     

mutations: {
      increment (state,payload) {
        state.count += payload.amount
        }
      }
      store.commit('increment', {
        amount:10
    })

  对象风格的提交方式

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

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

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

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

  Mutations 需遵守vue 的响应规则

    既然Vuex的store 中的状态是响应式的,那么当我们变更状态时,监视状态的vue更新 ,这也意味值Vue 中的mutation 也需要与使用 Vue 一样遵守一些注意事项。

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

      2.当需要在对象上提交新属性时,你应该使用        

Vue.set(obj, 'newProp', 123)

      使用新对象代替老对象  state.obj= {...state.obj ,newProp: 123}

      使用常量替代 Mutation 事件类型

      使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式     

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

mutation 必须是同步函数

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

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

在组件中提交 Mutations

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

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

Actions

    在mutation 中混异步调用会导致你的程序很难调试。

Actions

    Action 类似于 mutation,不同在于。

    Action 提交的是 mutation ,而不是直接变更状态。

    Action 可以包含任意异步操作。

    注册一个简单的 action    

const store = new Vuex.Store({
      state: {
          count:0
      },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions: {
        increment (context){
          context.commit('increment')
          }
        }
    })

Action 函数接受一个与store 实例具有相同方法和属性的context 对象,因此你可以调用 context.commit 提交一个mutation,或者通过 context.state 和context.getters 来获取 state 和 getters 当我们在之后介绍到Modules时,你就知道 context 对象为什么不是store 实例本身了。   

actions: {
      increment({commit}){
        commit('increment')
      }
    }

分发 Action

    Action 通过 store.dispatch 方法触发:     

store.dispatch('increment')

    我们可以在 action 内部执行异步操作。   

 actions: {
      incrementAsync({commit}){
        setTimeout(() => {
          commit('increment')
        },1000)
        }
      }

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

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

在组件中分发 Action

    你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用map Actions辅助函数将组件的methods 映射为store.dispatch 调用   

import {mapActions } from 'vuex'
      export default{
        methods:([
          'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')
        ])
      mapActions({
          add: 'inctement' // 映射 this.add() 为 this.$store.dispatch('increment')
        })
      }

组合 Actions

    Action 通常是异步的,那么如何知道 action 什么时候结束。

    你需要明白 store.dispatch 可以处理被处触发的action 的回调函数返回的Promise并且 store.dispatch 仍旧返回Promise   

actions: {
        actionA({commit}){
        return new Promise((resolve)=>{
            setTimeout (() => {
              commit('someMutation')
              resolve()
            },1000)
          })
        }
      }

  现在你可以     

store.dispatch('actionA').then(()=>{
        //...
      })

  在另一个 action 中也可以  

actions: {
      actionB({dispath,commit}){
        return dispatch('actionA').then(() => {
        commit('someOtherMutation')
      })
    }
    }

  我们利用async/ await   

// 假设 getData() 和 getOther() 返回的是一个 Promis
    actions:{
        async actionA ({commit}){
          commit('gotData',await getData())
        },
        async actionB({dispatch,commit}){
          await dispatch('actionA') // 等待 actionA 完成
          commit('goOtherData', await getOtherData())
        }
      }

    Modules

      使用单一状态树,当应用变的很大的时候,store 对象会变的臃肿不堪。

      Vuex 允许我们将store 分割到模块。每一个模块都有自己的state, mutation,action, getters, 甚至是嵌套子模块从上到下进行类似的分割。     

const moduleA = {
          state: {...},
        mutations: {...}
        actions: {...}
        getters:{...}
        }
    const moduleA = {
        state: {...},
        mutations: {...}
        actions: {...}
      }
    const store = new Vuex.Store({
      modules: {
          a:moduleA,
          b:moduleB
        }
      })
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态

模块的局部状态

    对于模块内部的 mutation 和 getter, 接收的第一个参数是模块的局部状态。  

 const moduleA = {
          state: {count:0},
          mutations: {
            increment (state) {
                // state 模块的局部状态
                state.count++
            }
          },
      getters: {
        doubleCount (state) {
        return state.count * 2
        }
      }
    }

  同样对于模块内部的action, context.state 是局部状态,根节点的窗台石context.rootState:    

const moduleA = {
          actions: {
          incrementIfOddOnRootSum ({state, commit ,rootState}) {
            if((state.count + rootState.count) %2 ===1){
                commit('increment')
          }
         }
        }
      }

对于模块内部的getter,跟节点状态会作为第三个参数:     

const moduleA = {
          getters: {
            getters: {
              sumWithRootCount (state,getters,rootState) {
                      return state.count + rootState.count
                }
              }
          }
        }

命名空间

    模块内部的action, mutation , 和 getter 现在仍然注册在全局命名空间    这样保证了多个模块能够响应同一 mutation 或 action. 也可以通过添加前缀 或者 后缀的

      方式隔离各个模块,以免冲突。     

// 定义 getter, action , 和 mutation 的名称为常量,以模块名 ‘todo' 为前缀。
        export const DONE_COUNT = 'todos/DONE_COUNT'
        export const FETCH_ALL = 'todos/FETCH_ALL'
        export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
          import * as types form '../types'
    // 使用添加了解前缀的名称定义, getter, action 和 mutation
     const todosModule = {
        state : {todo: []},
        getters: {
          [type.DONE_COUNT] (state) {
          }
      }
    actions: {
        [types.FETCH_ALL] (context,payload) {
       }
      },
    mutations: {
        [type.TOGGLE_DONE] (state, payload)
      }
    }

模块动态注册

    在store 创建之后,你可以使用 store.registerModule 方法注册模块。     

store.registerModule('myModule',{})

      模块的状态将是 store.state.myModule.

      模块动态注册功能可以使让其他Vue 插件为了应用的store 附加新模块

      以此来分割Vuex 的状态管理。

    项目结构

      Vuex 并不限制你的代码结构。但是它规定了一些需要遵守的规则:

        1.应用层级的状态应该集中到单个store 对象中。

        2.提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

        3.异步逻辑应该封装到action 里面。

          只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation、和 getters 分割到单独的文件对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例

├── index.html
├── main.js
├── api │
  └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
  ├── index.js  # 我们组装模块并导出 store 的地方
  ├── actions.js  # 根级别的 action
  ├── mutations.js  # 根级别的 mutation
  └── modules
     ├── cart.js  # 购物车模块
    └── products.js # 产品模块

您可能感兴趣的文章:

  • 如何使用Vuex+Vue.js构建单页应用
  • Vue.js实战之使用Vuex + axios发送请求详解
  • VUE使用vuex解决模块间传值问题的方法
  • 自定义vue全局组件use使用、vuex的使用详解
  • 详解使用Vue Router导航钩子与Vuex来实现后退状态保存
  • Vue 兄弟组件通信的方法(不使用Vuex)
(0)

相关推荐

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • 自定义vue全局组件use使用、vuex的使用详解

    自定义vue全局组件use使用(解释vue.use()的原理) 我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等. 其实使用的这些都是全局组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理 而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install自定义一个全局Loading组件,并使用: 总结目录: |-components |-loading |-index.js 导出

  • 详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    不好意思,标题比较啰嗦,因为这次的流水账确实属于一个比较细节的小东西,下面详细讲: 1需求 最近在使用electron-vue开发一个跨平台的桌面端软件,刚上手写了几个页面,遇到一个问题:桌面端软件通常会有导航需求,类似下图 导航按钮 点击返回按钮,返回上一页,并且显示上页内容.其实不止App,即使普通的网页中也会有此类需求,尤其是使用vue写SPA时. 项目中的导航几乎都是采用router.push({name: 'xxx', params: {xxx:123...}})这种方式.这种方式导致

  • Vue 兄弟组件通信的方法(不使用Vuex)

    项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子 首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示

  • VUE使用vuex解决模块间传值问题的方法

    在看电影.打Dota.撸代码间来回,犹豫不决,终于还是下决心继续学习VUE. 仿照 conde.js 官网写的一个demo,目前已经基本可用,但始终缺少登录页,没有用户权限管理,于是开撸...... <template> <div id="login"> <c-header></c-header> <c-form></c-form> <p class="content-block">

  • 如何使用Vuex+Vue.js构建单页应用

    前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和自定义功能,在这里和大家分享下学习心得. 在这篇教程中我们将通过构建一个笔记应用来学习如何在我们的 Vue 项目中使用 Vuex.我们将大概的过一遍什么是 Vuex.js,在项目中什么时候使用它,和如何构建我们的 Vue 应用. 这里放一张我们项目的预览图片: 项目源码:vuex-notes-app:有需要的同学可

  • vuex 使用文档小结篇

    Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel调试.状态快照导入导出等高级调试功能. 安装 直接下载CDN 引用 <script src="/path/to/vue.js"></script> <script s

  • 详解Vue文档中几个易忽视部分的剖析

    针对Vue文档中部分大家可能不会去研读的内容,我做了个小总结,作为有经验者的快餐,不是特别适合初学者,可能有不妥之处,希望大家多提建议. 节省代码量的mixin mixin概念:组件级可复用逻辑,包括数据变量/生命周期钩子/公共方法,从而在混入的组件中可以直接使用,不用重复写冗余逻辑(类似继承) 使用方法: 在某一公共文件夹pub下创建mixin文件夹,其下创建mixinTest.js const mixinTest = { created() { console.log(`components

  • JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)

    http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识.因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1.DOM的架构 复制代码 代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo<

  • C# winform打开Excel文档的方法总结(必看篇)

    C#打开Excel文档方法一:调用Excel的COM组件 在项目中打开Add Reference对话框,选择COM栏,之后在COM列表中找到"Microsoft Excel 11.0 Object Library"(Office 2003),然后将其加入到项目的References中即可.Visual C#.NET会自动产生相应的.NET组件文件,以后即可正常使用. 按钮的点击事件如下: privatevoid button1_Click(object sender, EventArg

  • MongoDB数据库文档操作方法(必看篇)

    前面的话 本文将详细介绍MongoDB数据库关于文档的增删改查 如果数据库中不存在集合,则MongoDB将创建此集合,然后将文档插入到该集合中 要在单个查询中插入多个文档,可以在insert()命令中传递文档数组 可以使用js语法,插入多个文档 [save()] 插入文档也可以使用db.post.save(document). 如果不在文档中指定_id,那么save()方法将与insert()方法一样自动分配ID的值.如果指定_id,则将以save()方法的形式替换包含_id的文档的全部数据.

  • XML文档搜索使用小结

    大家在.NET中处理XML文档的时候,经常会需要找到文档中的某个节点的数据.要找到某个节点,有许多种方法,在这里我就把几种常用的方法给大家总结一下. 首先,我们要做的是要把一个XML文档装入到一个XmlDocument对象中去. 先引用几个名字空间: using System.Xml;   using System.Xml.Xsl;   using System.Xml.XPath; 这几个名字空间大家根据名字就知道它的意思了,我就不在这儿多说了.然后就是装入XML文件的代码,方法如下: Str

  • C#打印PDF文档的10种方法(小结)

    操作PDF文档时,打印是常见的需求之一.针对不同的打印需求,可分多种情况来进行,如设置静默打印.指定打印页码范围和打印纸张大小.双面打印.黑白打印等等.经过测试,下面将对常见的几种PDF打印需求做一些归纳总结,这里归纳了10种打印需求及方法.如下: 使用默认打印机打印PDF文档 使用虚拟打印机(Microsoft XPS Document Writer)打印PDF文档 指定打印机及PDF文档打印页码范围 静默打印PDF文档 双面打印PDF文档 黑白打印PDF文档 打印PDF文档时选择不同的出纸盒

  • MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束:另外,存入集合的文档对象甚至可以嵌入子文档,或者"子集合".他们最终都可以用类似于BJSON的格式描述.我们今天就来分析MongoDB这一特性带来的独特数据管理方式.我们还是以samus驱动为例来分析,samus驱动支持两种方式访问数据库,基本方式和linq方式,基本方式在上篇以介绍过,

  • 如何将HTML字符转换为DOM节点并动态添加到文档中详解

    前言 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 字符串转换为HTML DOM节点的基本方法及性能测试 2 动态生成的DOM节点添加到文档中的方法及性能测试 本文的示例: 有如下代码段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

  • java集成开发SpringBoot生成接口文档示例实现

    目录 为什么要用Swagger ? Swagger集成 第一步: 引入依赖包 第二步:修改配置文件 第三步,配置API接口 Unable to infer base url For input string: "" Swagger美化 第一步: 引入依赖包 第二步:启用knife4j增强 Swagger参数分组 分组使用说明 1.在bean对象的属性里配置如下注释 2.在接口参数的时候加入组规则校验 小结 大家好,我是飘渺. SpringBoot老鸟系列的文章已经写了两篇,每篇的阅读反

随机推荐