vue2.0项目实战vuex快速入门
Posted 一叶知秋 https://www.cssge.com
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.0项目实战vuex快速入门相关的知识,希望对你有一定的参考价值。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明。这里就不再细讲vuex的各个用法。
为什么要用vuex
当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态。
遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理。这样不管你在何处改变状态,都会通知使用该状态的组件做出相应修改。
下面讲解如何使用Vuex。
Vuex的核心
vuex由以下几部分组成:
- state ( state里面就是存放的我们上面所提到的状态 )
- mutations (mutations就是存放如何更改状态)
- getters (getters就是从state中派生出状态,比如将state中的某个状态进行过滤然后获取新的状态。)
- actions (actions就是mutation的加强版,它可以通过commit mutations中的方法来改变状态,最重要的是它可以进行异步操作。)
- modules (modules顾名思义,就是当用这个容器来装这些状态还是显得混乱的时候,我们就可以把容器分成几块,把状态和管理规则分类来装。这和我们创建js模块是一个目的,让代码结构更清晰。)
最简单的Vuex示例
本文就不涉及如何安装Vuex,直接通过代码讲解。
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
以上就是一个最简单的Vuex,每一个Vuex应用就是一个store,在store中包含组件中的共享状态state
和改变状态的方法(暂且称作方法)mutations
。
需要注意的是只能通过mutations
改变store的state
的状态,不能通过store.state.count = 5;
直接更改(其实可以更改,不建议这么做,不通过mutations
改变state
,状态不会被同步)。
使用store.commit
方法触发mutations
改变state
:
store.commit(‘increment‘); console.log(store.state.count) // 1
一个简简单单的Vuex应用就实现了。
在Vue组件使用Vuex
如果希望Vuex状态更新,相应的Vue组件也得到更新,最简单的方法就是在Vue的computed
(计算属性)获取state
// Counter 组件 const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return store.state.count; } } }
上面的例子是直接操作全局状态store.state.count
,那么每个使用该Vuex的组件都要引入。为了解决这个,Vuex通过store
选项,提供了一种机制将状态从根组件注入到每一个子组件中。
// 根组件 import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const app = new Vue({ el: ‘#app‘, store, components: { Counter }, template: ` <div class="app"> <counter></counter> </div> ` })
通过这种注入机制,就能在子组件Counter
通过this.$store
访问:
// Counter 组件 const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } }
mapState函数
computed: { count () { return this.$store.state.count } }
这样通过count
计算属性获取同名state.count
属性,是不是显得太重复了,我们可以使用mapState
函数简化这个过程。
import { mapState } from ‘vuex‘; export default { computed: mapState ({ count: state => state.count, countAlias: ‘count‘, // 别名 `count` 等价于 state => state.count }) }
还有更简单的使用方法:
computed: mapState([ // 映射 this.count 为 store.state.count ‘count‘ ])
Getters对象
如果我们需要对state
对象进行做处理计算,如下:
computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } }
如果多个组件都要进行这样的处理,那么就要在多个组件中复制该函数。这样是很没有效率的事情,当这个处理过程更改了,还有在多个组件中进行同样的更改,这就更加不易于维护。
Vuex中getters
对象,可以方便我们在store
中做集中的处理。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) } } })
在Vue中通过store.getters
对象调用。
computed: { doneTodos () { return this.$store.getters.doneTodos } }
Getter也可以接受其他getters作为第二个参数:
getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) }, doneTodosCount: (state, getters) => { return getters.doneTodos.length } }
mapGetters辅助函数
与mapState
类似,都能达到简化代码的效果。mapGetters
辅助函数仅仅是将store中的getters映射到局部计算属性:
import { mapGetters } from ‘vuex‘ export default { // ... computed: { // 使用对象展开运算符将 getters 混入 computed 对象中 ...mapGetters([ ‘doneTodosCount‘, ‘anotherGetter‘, // ... ]) } }
上面也可以写作:
computed: mapGetters([ ‘doneTodosCount‘, ‘anotherGetter‘, // ... ])
所以在Vue的computed
计算属性中会存在两种辅助函数:
import { mapState, mapGetters } from ‘vuex‘; export default { // ... computed: { mapState({ ... }), mapGetter({ ... }) } }
Mutations
之前也说过了,更改Vuex的store中的状态的唯一方法就是mutations
。
每一个mutation
都有一个事件类型type
和一个回调函数handler
。
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } })
调用mutation
,需要通过store.commit
方法调用mutation type
:
store.commit(‘increment‘)
Payload 提交载荷
也可以向store.commit
传入第二参数,也就是mutation的payload
:
mutaion: { increment (state, n) { state.count += n; } } store.commit(‘increment‘, 10);
单单传入一个n
,可能并不能满足我们的业务需要,这时候我们可以选择传入一个payload
对象:
mutation: { increment (state, payload) { state.totalPrice += payload.price + payload.count; } } store.commit({ type: ‘increment‘, price: 10, count: 8 })
mapMutations函数
不例外,mutations也有映射函数mapMutations
,帮助我们简化代码,使用mapMutations
辅助函数将组件中的methods
映射为store.commit
调用。
import { mapMutations } from ‘vuex‘ export default { // ... methods: { ...mapMutations([ ‘increment‘ // 映射 this.increment() 为 this.$store.commit(‘increment‘) ]), ...mapMutations({ add: ‘increment‘ // 映射 this.add() 为 this.$store.commit(‘increment‘) }) } }
注 Mutations必须是同步函数。
如果我们需要异步操作,Mutations就不能满足我们需求了,这时候我们就需要Actions
了。
Aciton
相信看完之前的Vuex的内容,你就已经入门了。那么Action就自己进行学习吧(Action有点复杂,我还需要时间消化)。
结语
学习一门新技术最重要的就是实践,单单看教程和demo是远远不够的。
查看跟多内容,请访问我的独立博客 https://www.aaz5.com
以上是关于vue2.0项目实战vuex快速入门的主要内容,如果未能解决你的问题,请参考以下文章