vuex的原理和使用方法

简介

Vuex 是 Vue.js 应用的状态管理模式，它为应用内的所有组件提供集中式的状态（数据）管理。可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。

Vuex的构成 

• state：state 是 Vuex 的数据中心，也就是说state是用来存储数据的。

• getters：state 对象读取方法。Vue Components 通过该方法读取全局 state 对象。

• mutations：状态改变操作方法。 是 Vuex 修改 state 的唯一推荐方法，其他修改方式在严格模式下将会报错。 该方法只能进行同步操作， 且方法名只能全局唯一。 操作之中会有一些 hook 暴露出来， 以进行state 的监控等。

• actions：操作行为处理模块。 负责处理 Vue Components 接收到的所有交互行为。 包含同步/异步操作， 支持多个同名方法， 按照注册的顺序依次触发。 向后台 API 请求的操作就在这个模块中进行， 包括触发其他 action 以及提交 mutation 的操作。 该模块提供了 Promise的封装， 以支持 action 的链式触发。

• modules：将 Store 分割成模块，每个模块拥有自己的 State、Getters、Mutations Actions。

 Vuex的使用

1、安装         Vuex：npm install vuex。

2、创建store示例

store对象

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {count: state => state.count}
});

在 Vue 根实例中注册store

import Vue from 'vue';
import App from './App.vue';
import store from './store';new Vue({store,render: h => h(App)
}).$mount('#app');

在组件中使用 Store

export default {computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.dispatch('increment');}}
};

 使用Vuex内容扩展

在真正开发中使用vuex时会有好多细节知识和注意事项，下面我们扩展一下，仅供参看

 Vue 组件中获得 Vuex 状态(State) 

方式一： this.$store.state获取

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到

computed: {count () {return this.$store.state.count}
}

 方式二： mapState 辅助函数获取（推荐）

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

<template><div>{{count}}</div>
</template>
<script>
import { mapState }from 'vuex
export default{computed:{...mapstate(['count'])}
}
</script>

Getter的定义和获取方式

定义getters：

需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

【下面getters引用的state中的数据：list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】

getters: {// getters函数的第一个参数是 state// 必须要有返回值filterList:  state =>  state.list.filter(item => item > 5)
}

获取getters：

方式一： 通过属性访问

this.$store.getters.filterList

方式二：辅助函数 - mapGetters 

<template><div>{{filterList}}</div>
</template>
<script>
import { mapGetters }from 'vuex
export default{computed:{...mapGetters(['filterList'])}
}
</script>

Vue组件中调用Vuex：mutations中的方法

• 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
• 通过 mapMutations 映射

        1、默认根级别的映射 mapMutations([ ‘xxx’ ])
        2、子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间

方式一：普通调用方式

• this.$store.commit('addCount') 此为不带参数的写法
• this.$store.commit('addCount', 10) 此为带参数写法

<template><div @click="addData">{{count}}</div>
</template>
<script>
export default{methods: {addData() {this.$store.commit('increment')}}
}
</script>

方式二：辅助函数- mapMutations

mapMutations是将所有mutations里面的方法映射为实例methods里面的方法

<template><div @click="addData">{{count}}</div><div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapMutations } from 'vuex'methods: {// 有别名的写法[对应第一行div]...mapMutations({addData:'increment'})// 同名的简写[对应第二行div]...mapMutations(['increment'])}
}
</script>

Vue组件获取Vuex：actions中的方法

• 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
• 通过 mapActions 映射

        1、默认根级别的映射 mapActions([ ‘xxx’ ])
        2、子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

方式一：普通调用方式

this.$store.dispatch('increment')

this.$store.dispatch('increment',{num: 10})

<template><div @click="addData">{{count}}</div>
</template>
<script>
export default{methods: {addData() {this.$store.dispatch('increment')}}
}
</script>

方式二：辅助函数 -mapActions

mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中

<template><div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapActions } from 'vuex'methods: {...mapActions (['increment'])}
}
</script>