深入浅出学习vuex

一、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(“命名空间名称”，[' ']),
}