一、Vuex究竟是什么
简而言之vuex 就是一个专门为vue.js应用程序开发的状态管理模式。
这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分。也就是说,是我们需要共享的data,使用vuex进行统一集中式的管理。
二、Vuex 的基本组成:
- state:State 从字面意思理解,就是状态,在 Vuex 里面,什么代表了状态呢?答案是:数据。State 是 Vuex 这一状态管理工具的唯一的数据源,所有的数据都储存在里面。
- getter: 通俗的理解可以认为是getter里的函数就是vuex里的计算属性,根据其他 getter 或 state 计算返回值。
- mutation: Mutation 是 Vuex 当中改变 state 唯一的方法。Mutation 使用与事件处理函数非常相似,都具有类型和回调函数。(唯一改变状态的地方)
- action: 异步操作。在组件中使用是$store.dispath(’’),想要异步更改状态必须使用action
- modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
三、Vuex的安装与基本配置
1、安装,我是通过cnpm安装,当然也可以通过npm、yarn以及其他方式
cnpm install --save vuex
2、导入
在一个模块化的打包系统中,您必须显式地通过Vue.use()来安装Vuex。
import Vue from 'vue'
import Vuex from 'vuex'
调用插件
Vue.use(Vuex)
四、Vuex的基本处理
同步处理
用this.$store.state.属性名 获取,也可以直接修改状态 但不推荐,极其危险,会影响其他页面调用此数据。
建议:
1.在生命周期(mounted)中用this.$store.commit(‘hide’) 传递 会默认把store对象传递过去;
2.用mutations:{ hide(){ 操作 } } 接受并操作,会记录其操作记录,做到有据可查;
3.使用时通过this.$store.state.属性名 获取
异步处理
1.在mounted通过this.$store.dispatch(“方法名”)调用;
2.在actions:{ 方法名:{} }中处理,然后store.commit(“处理方法名”,数据)调用传递到mutations:{ 处理方法名(): { } };
3.在mutations:{}中处理赋值给state:{ };
4.在使用时通过this.$store.state.属性名 获取
vuex可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更
为了简便起见,Vuex 提供了四个方法用来方便的将这些功能结合进组件。
mapState,mapGetters,mapMutations,mapActions
-
学习运用mapState (先用import { mapState } from 'vuex’导入,引入State,在computed计算属性中用ES6展开 …mapState( [ ] ) ) ;
-
1.mapGetters( [ ] ) 与 mapState( [ ] ) 在computed中展开(因为其属于属性,所以放在computed)
2.mapMutations( [ ] ) 与 mapActions( [ ] ) 在methods中展开 (因为其属于方法,所以放在methods)
-
mapState、mapGetters、mapMutations、mapActions第一个参数是字符串(命名空间名称),第二个参数是数组(不需要重命名)/对象(需要重命名)
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'//导入
computed: {
...mapState(“命名空间名称”,[' ']),
...mapGetters(“命名空间名称”,[' ']),
})
}
methods: {
...mapMutations(“命名空间名称”,[' ']),
...mapActions(“命名空间名称”,[' ']),
}