对vuex的认识和简单理解

Posted fozero

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了对vuex的认识和简单理解相关的知识,希望对你有一定的参考价值。

概述及使用场景

Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构。它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护、可理解的状态。
但如果是简单的应用 ,就没有必要使用vuex来管理状态了, 只会增加应用的复杂性 ,一个简单的应用完全可以使用$emit这种方式就可以来解决https://cn.vuejs.org/v2/guide/components.html#非父子组件的通信。 比如 ,通过父组件传值给子组件,子组件处理完数据,
如果需要对该属性值进行变更,则再发送给父组件就可以了,不需要使用vuex,
但是如果是大型项目中的公共属性,多个不关联的组件之间都需要使用某个属性,
如果这时候再使用传值就特别的不方便,逻辑很混乱,这时候放到vuex仓库就很简单了,
某组件对vuex的属性更改完了,其他任何组件都可以拿来用

用一张图来理解

以上是官方提供的一张状态管理图,从图中可以看出以下几点:
1、整个过程它是一个单向的数据流
2、涉及到几个核心概念Actions,mutations和state
3、组件可以调用actions,通过action来分发mutations ,只有 mutations 可以修改状态,store(仓库) 是响应式的,即状态的变化会在组件内部得到反映

另外,每一个 Vuex 应用的核心就是 store(仓库),包含着你的应用中大部分的状态 (state),他和单纯的全局对象不同的是:
1、Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新
2、不能直接改变 store 中的状态,改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation

vuex核心概念

state单一状态树

组件中获取状态,在计算属性中返回某个状态,例如

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM
以上模式组件依赖全局状态单例,需要在每个使用 state 的组件中需要频繁地导入,vuex提供了一种机制将状态从根组件“注入”到每一个子组件中,通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,在子组件中就可以通过this.$store形式访问到

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

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余,这时候可以使用 mapState辅助函数帮助我们生成计算属性

1、通过import先把mapState 导入进来
import { mapState } from \'vuex\'
2、使用mapState
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\'
])

通过对象展开运算符可以使用...mapState形式简化写法

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

getters,从 store 中的 state 中派生出一些状态

有时候我们需要从 store 中的 state 中派生出一些状态,例如过滤某个数组,可以在组件中的计算属性中获取到state然后过滤,但如果我们要在多个组件中去使用它,这样做法不太理想,这时我们可以在store中定义一个getters

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

组件中使用getters

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

使用mapGetters 辅助函数将 store 中的 getter 映射到局部计算属性

import { mapGetters } from \'vuex\'
export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      \'doneTodosCount\',
      \'anotherGetter\',
      // ...
    ])
  }
}

mutation提交,更改store状态

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler),Vuex 中的 mutation 非常类似于事件

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

如果要调用increment函数时,要唤醒一个 mutation handler,需要以相应的 type 调用 store.commit 方法

store.commit(\'increment\')
也可以向 store.commit 传入额外的参数
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit(\'increment\', 10)
这里的参数也可以是一个对象
store.commit(\'increment\', {
  amount: 10
})

使用常量替代 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
    }
  }
})

在组件中使用 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` 也支持载荷:
      \'incrementBy\' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit(\'incrementBy\', amount)`
    ]),
    ...mapMutations({
      add: \'increment\' // 将 `this.add()` 映射为 `this.$store.commit(\'increment\')`
    })
  }
}

使用Action可以使得在mutation中更方便的使用异步

在 Vuex 中,mutation 都是同步事务,Action 类似于 mutation,但不同的是Action 提交的是 mutation,而不是直接变更状态,并且可以包含任意异步操作

1、注册action

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

在我们需要调用 commit 很多次的时候,使用ES2015 的 参数解构 来简化代码

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

2、分发action
Action 通过 store.dispatch 方法触发:
store.dispatch(\'increment\')
看上去有点多此一举,为何不直接分发mutation,这是因为 mutation 必须同步执行,而我们可以在 action 内部执行异步操作

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

同样,也可以使用载荷方式和对象方式进行分发

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

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

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

import { mapActions } from \'vuex\'

export default {
  // ...
  methods: {
    ...mapActions([
      \'increment\', // 将 `this.increment()` 映射为 `this.$store.dispatch(\'increment\')`

      // `mapActions` 也支持载荷:
      \'incrementBy\' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch(\'incrementBy\', amount)`
    ]),
    ...mapActions({
      add: \'increment\' // 将 `this.add()` 映射为 `this.$store.dispatch(\'increment\')`
    })
  }
}

module,将 store 分割成模块

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

vuex调试工具
https://github.com/vuejs/vue-devtools

相关文章
用 Vuex 构建一个笔记应用
https://segmentfault.com/a/1190000005015164
从一个改写后的vue小应用认识vuex
https://www.jianshu.com/p/9dcbe1fec24d

作者:fozero
声明:原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/8094265.html
标签:vuejs,vuex,前端

以上是关于对vuex的认识和简单理解的主要内容,如果未能解决你的问题,请参考以下文章

个人对vuex的表象理解(笔记)

Vuex的简单认识

帮你更快认识Vuex,数据流向

vuex的理解与使用

Vuex

对代码规范的认识