《Vue.js 前端开发技术与实践》课件-第10章 vuex状态管理器

第10章vuex状态管理器

什么是vuexVuex是一个专为Vue应用程序开发的状态（数据）管理模式。它采用集中式存储管理应用的所有组件的状态（数据）。每一个Vuex应用的核心就是store（仓库），即响应式容器，它用来定义应用中数据以及数据处理工具。Vuex的状态存储是响应式的，当store中数据状态发生变化，那么页面中的store数据也发生相应变化。改变store中的状态的唯一途径就是显式地提交mutation，这样可以方便地跟踪每一个状态的变化。Vuex的下载和安装（1）下载vuex.js登录下载地址/zh/installation.html，下载vuex.js存放在项目js文件夹之下。（2）引入在HTML页面先引入Vue.js，后接着引入Vuex.js。<script

src="js/vue.js"></script><script

src="js/vuex.js"></script>在Vue.js之后引入vuex.js，vuex.js会进行自动安装。Vuex基本使用（1）创建store实例通过new关键字实例化一个store实例，该实例是单一的状态树（数据仓库）。创建store实例语法：newVuex.store({state:{},//状态，组件中需要共享使用的数据mutations:{},//改变状态的唯一方式就是提交mutation，同步改变状态 getters:{},//类似计算属性actions:{}//用于异步更新状态})（2）将store实例注入到Vue根实例上

var

vm

=

new

Vue({

el:

'#app',

store,

});

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

Vuex配置选项1、state配置选项Vuex的状态存储是响应式，即store中的状态是响应式的，在组件调用store中的状态时仅需要在计算属性中返回即可。通过“this.$store.state.key(字段名)”访问到store中数据mapState辅助函数：当一个组件需要获取多个状态时，将这些状态都声明为计算属性有些麻烦，这时候可以使用mapState辅助函数来生成计算属性。（1）数组写法：…mapState([‘字段key’])例如：

...mapState(["name","gender","age"])（2）对象写法：…mapState({自定名1:‘字段key’,……})例如：

...mapState({

xm:

"name",

xb:"gender",

nl:

"age"})在一个模块化的打包系统中通过import{mapState}from“vuex”引入Vuex配置选项2、

getters配置选项有时候在数据使用前，需要进行一些处理，即从store中派生出一些状态（数据），Vuex在

store中定义“getter”选项（可以认为是store的计算属性），来派生出一些状态。在组件中使用getters，通过“this.$store.getters.函数名”直接获取，也可以通过辅助函数mapGetters。数组写法：…mapgetteers([‘函数名’])对象写法：…mapgetteers({key:‘函数名’})Vuex配置选项3、mutations配置选项需要修改store（仓库）中的数据，唯一途径就是显式地mommit提交mutation，mutation必须是同步函数。mutations:{

函数名（state,payload）{ //修改state的中的数据}在组件中提交Mutation方式：（1）this.$mit()提交this.$mit(‘函数名’,参数对象)（2）辅助函数mapMutations数组写法：…mapMutations([‘函数名’])对象写法：…mapMutations({key:’函数名’})Vuex配置选项4、

actions配置选项Action是异步修改state的数据。异步修改state也需要提交一个mutation，才能达到修改的目的。actions:{

函数名({commit},paload){ commit(‘mutation中的函数名’)}}在组件中分发Action方式：（1）在组件中使用

this.$store.dispatch()

分发actionthis.$store.dispatch(‘函数名’,参数对象)或使用包含type属性的对象this.$store.dispatch({type:’函数名’,key