Vuex简单入门基础
一.什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理架构。它借鉴了 Flux 和 Redux的设计思想,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。。状态?理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。
二.Vuex的组成部分
完整的应用Vuex开发的应用结构应该是这样的:
1.State
State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store对象,后期就可以使用this.$store.state直接获取状态
//store为实例化生成的 import store from './store' new Vue({ el: '#app', store, render: h => h(App) })
这个store可以理解为一个容器,包含着应用中的state等。实例化生成store的过程是:
const mutations = {...}; const actions = {...}; const state = {...}; Vuex.Store({ state, actions, mutation });
后续在组件中使用的过程中,如果想要获取对应的状态你就可以直接使用this.$store.state获取,当然,也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去,如
//我是组件 import {mapState} from 'vuex' export default { computed: mapState({ count: state => state.count }) }
2.Mutations
Mutations的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是,定义的mutation必须是同步函数,否则devtool中的数据将可能出现问题,使状态改变变得难以跟踪。
const mutations = { mutationName(state) { //在这里改变state中的数据 } } 在组件中触发: //我是一个组件 export default { methods: { handleClick() { this.$store.commit('mutationName') } } } 或者使用辅助函数mapMutations直接将触发函数映射到methods上,这样就能在元素事件绑定上直接使用了。如: import {mapMutations} from 'vuex' //我是一个组件 export default { methods: mapMutations([ 'mutationName' ]) }
3.Actions
Actions也可以用于改变状态,不过是通过触发mutation实现的,重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似,也是绑定在组件的methods上的。如果选择直接触发的话,使用this.$store.dispatch(actionName)方法。
//定义Actions const actions = { actionName({ commit }) { //dosomething commit('mutationName') } } 在组件中使用 import {mapActions} from 'vuex' //我是一个组件 export default { methods: mapActions([ 'actionName', ]) }
4.Getters
有些状态需要做二次处理,就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。
const getters = { strLength: state => state.aString.length } //上面的代码根据aString状态派生出了一个strLength状态 在组件中使用 import {mapGetters} from 'vuex' //我是一个组件 export default { computed: mapGetters([ 'strLength' ]) }
5.Plugins
插件就是一个钩子函数,在初始化store的时候引入即可。比较常用的是内置的logger插件,用于作为调试使用。
import createLogger from 'vuex/dist/logger' const store = Vuex.Store({ ... plugins: [createLogger()] })
三.demo
1.components\public\vuexHome.vue
vuex
<script> import vuexDemo from '../pack/vuexDemo' import vuexIncrement from '../pack/vuexIncrement' export default { name:"vuexHome", components: { vuexDemo:vuexDemo, vuexIncrement: vuexIncrement } } </script>#vuexHome{ text-align:center; }
2.components\pack\vuexDemo.vue
测试1:Count is {{count}}
<script> import { mapState } from 'vuex' export default { computed:{ count(){ //通过 store.state 来获取状态对象 return this.$store.state.count } } } </script>
3.components\pack\vuexIncrement.vue
+-
<script> import { mapState } from 'vuex' export default { data:function () { return { localCount:2 } }, methods:{ increment(){ //通过 store.commit 方法触发状态变更(mutation的方法) this.$store.commit('increment'); }, decrement(){ this.$store.commit('decrement'); } } } </script>
4.\store\store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //创建一个对象来保存应用启动时的初始状态 state:{ // 应用启动时, count置为0 count:0 }, /*创建一个对象存储一系列我们接下来要写的 mutation 函数 * mutation 函数是处理数据的函数,其接收唯一参数值state *store.commit(mutationName)是用来触发一个mutation的方法 */ mutations:{ increment:state => state.count ++, decrement:state => state.count --, } }