vuex的使用

1、安装vuex依赖包

npm install vuex --save

2、导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3、创建 store 对象

export default new Vuex.Store({
     // state 中存放的就是全局共享的数据
	  state: {
	    count: 0
	  }
})

4、将 store 对象挂载到 vue 实例中

new Vue({
  el: '#app',
  render: h => h(App),
  router,
  // 将创建的共享数据对象，挂载到 Vue 实例中
  // 所有的组件，就可以直接用 store 中获取全局的数据了
  store
})

VueX：状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

核心模块：

State、Getters、Mutations、Actions、Module

1. State：

State 提供唯一的公告数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据。

 // 创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
   state: {
      count: 0
   }
})

组件访问 Store 中数据的第一种方式：

this.$store.state.全局数据名称

组件访问 Store 中数据的第二种方式：

// 1.从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：

// 2.将全局数据，映射为当前组件的计算属性
computed: {
    ...mapState(['count'])
}

2. Getters：

Getter相当于vue中的computed计算属性，不会修改 state 里的源数据，只起到一个包装器的作用，将 state 里的数据变一种形式然后返回出来。getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果。

① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
② Store 中数据发生变化，Getter 包装出来的数据也会跟着变化。

定义：

// 定义 Getter
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum: state => {
      return '当前最新的数量是【'+ state.count +'】'
    }
  }
})

使用 getters 的第一种方式：

this.$store.getters.名称

使用 getters 的第二种方式：

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['showNum'])
}

3. Mutations：

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，只有 mutation 里的函数才有权利去修改 state 中的数据。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。但是，mutation只允许同步函数，不能写异步的代码。

①只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
②通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

定义：

// 定义 Mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    add (state) {
      // 变更状态
      state.count++
    }
  }
})

第一种触发方式：

// 触发 mutation
methods: {
    handleAdd () {
      // 触发 mutations 的第一种方式
      this.$store.commit('add')
    }
}

还可以在触发 mutations 时传递参数：

// 定义 Mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addN (state, step) {
      // 变更状态
      state.count += step
    }
  }
})

第一种触发方式：

// 触发 mutation
methods: {
    handleAdd () {
      this.$store.commit('addN', 3)
    }
}

触发 mutations 的第二种方式：

// 1.从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'

通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：

// 2.将指定的 mutations 函数，映射为当前组件的methods 函数：
methods: {
   ...mapMutations({'add', 'addN'})
}

注意：不要在 mutations 函数中，执行异步操作。所以就需要用到了 Action 用于处理异步任务

4. Actions：

官方并不建议我们直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值。可以异步操作。

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
定义：

// 定义 Action
const store = new Vuex.Store({
  // ...省略其他代码
  mutations: {
    add (state) {
      state.count++
    }
  },
  actions: {
    addAsync (context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    }
  }
})

第一种方式触发：

// 触发 Action
methods: {
  handleAdd () {
      // 触发 actions 的第一种方式
      this.$store.dispatch('addAsync')
  }
}

注意：在 actions 中，不能直接修改 state 中的数据，必须通过 context.commit() 触发某个 mutations 的函数才行。

触发 actions 异步任务时携带参数：

定义：

// 定义 Action
const store = new Vuex.Store({
  // ...省略其他代码
  mutations: {
    addN (state, step) {
      state.count += step
    },
  },
  actions: {
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
  }
})

触发：

// 触发 Action
methods: {
  handleAdd () {
      // 在调用 dispatch 函数，触发 actions 时携带参数
      this.$store.dispatch('addNAsync', 5)
  }
}

触发 actions 的第二种方式：

// 1.从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：

// 2.将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
  ...mapActions(['addAsync', 'addNAsync'])
}

5. Module：

Vuex 允许我们将store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

简要介绍各模块在流程中的功能：

• Vue Components：Vue 组件。HTML 页面上，负责接收用户操作等交互行为，执行 dispatch 方法触发对应 action 进行回应。
• dispatch：操作行为触发方法，是唯一能执行 action 的方法。
• actions：操作行为处理模块,由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由 commit()来触发 mutation 的调用 , 间接更新 state。负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行，包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装，以支持 action 的链式触发。
• commit：状态改变提交操作方法。对 mutation 进行提交，是唯一能执行 mutation 的方法.
• mutations：状态改变操作方法，由 actions 中的commit(‘mutation 名称’)来触发。是 Vuex 修改 state 的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些 hook 暴露出来，以进行 state 的监控等。
• state：页面状态管理容器对象。集中存储 Vue components 中 data 对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
• getters：state 对象读取方法。图中没有单独列出该模块，应该被包含在了 render 中，Vue Components 通过该方法读取全局 state 对象。