程序员必懂小知识之Vuex的使用

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

大家好，我是_Peach，今天来分享下工作中使用到Vuex小知识，同时也给我自己做下总结

1. 什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
总的来说Vuex负责数据的传输和共享

2. 为什么要使用Vuex

当我们的应用遇到多个组件共享状态时比如：
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。 Vuex在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

3.安装Vuex

这里我使用的NPM安装方式

npm install vuex --save

安装完成后在main.js文件里面引用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

4.使用方式

创建store文件夹，新建index.js,action.js,mutations.js文件

index.js文件这里通过import引入 action.js,mutations.js文件，挂载到new Vuex.Store

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
Vue.use(Vuex)

const state = {
  username:'',//登录用户名
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

action.js文件

/* 
商城Vuex-action
*/
// 传输
export default {
  saveUserName(context,username){
    context.commit('saveUserName',username)
  }
}

mutations.js文件

/* 
商城Vuex-mutations
*/
// 读取
export default {
  saveUserName(state,username){
    state.username = username
  }
}

先在main.js里面导入

import store from './store/index';

new Vue({
  store, //这里挂载
  router,
  render: h => h(App),
}).$mount('#app')

Action 通过 store.dispatch 方法触发：

this.$store.dispatch('SavaUserName',res.username)

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

this.$store.state.username

数据延迟可通过计算属性解决

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

`mapState` 辅助函数

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

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

对象展开运算符

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符 (opens new window)，我们可以极大地简化写法：

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

总结

在组件中提交 Mutation

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

在组件中分发 Action

你在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

这里的只介绍了部分信息，如需完整内容请移步到vuex的官方文档