轻松上手Vue - 简化Vuex

PS: Vuex 对于很多初入门Vue的来说，入门困难，感觉非常绕。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

在改造之前，我们的做法大都是如下写法：

1563187445309.png

绕过多层后，才真正修改到数据。

改造之前 Vuex的基本用法和介绍

import Vue from "vue"
import Vuex from "vuex"

// State
var state = {
    name: 'Pi'
}

// Mutation - 同步
var mutations = {
    setName: (state, newName) => {
        state.name = newName
    }
}

// Action - 异步
var actions = {
    // commit是vuex返回的异步函数，可以调用mutations中的函数
    setName: ({ commit }, newName) {
      // 用法一：同步
      commit('setName', newName)
      // 用法二: 异步
      ajax.get('xxx你的接口').then(res => {
         commit('setName', res)
      })
    }
}

// Getter
var getters = {
    getName (state) {
        // 用法一：直接返回state中的值
        return state.name
        // 用法二：调取存在其他位置的值
        return localStorage.getItem('name')
        // 用法三：根据接口返回 - 需要getName.then() 监听
        return new Promise((resolve, reject) => {
            ajax.get('xxx你的接口').then(res => {
                resolve(res)
            })
        })  
    }
}
// 导出
export default {
  state,
  mutations,
  actions
}

Vuex的一些规则：

1. 应用层级的状态应该集中到单个 store 对象中。
2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3. 异步 逻辑都应该封装到 action 里面。

​ 为什么要绕一层Mutations去改变State？因为Actions可以创建多个函数来修改同一个State属性的内容，尤其是N个组件处理，你将不知道哪里最终生效，谁最先执行，所以Mutations也可以做为一层网关。

进入正题，开始改造Vuex

1. 安装Vuex-Convert（个人整理的开源库，内容简单，可以自己扩展，地址放底部）

   npm i vuex-convert
   

2. 项目内任意位置，创建一个store.js，内容如下

import Vue from 'vue'
import Vuex from 'vuex'
import VuexConvert from 'vuex-convert'
const STORE = new VuexConvert({
  // Public 为公共的State，请不要删除
  public:{
    name: 'Pi'
  }
})
 
Vue.use(Vuex)
export default new Vuex.Store(STORE)

3. 在main.js 中引入

   import store from './你存放store.js的目录/store.js'
   
   // 日常初始化
   new Vue({
     store,  // <<<--- 此处引入
     render: h => h(App)
   }).$mount('#app')
   

4. 用法

 

 // 如何获取和设置(get/set + 首字母大写)
 
 // 获取数据的方式
  this.$store.state.name // 正常
  this.$store.getters.getName // 首字母大写，前面加get
  this.$store.getters["user/getName"] // 模块获取，前面加模块名即可
    
  // 修改数据的方式 
  this.$store.dispatch('setName', '要修改的值') // 前面为set + 属性名(首字母大写)

5. OK ，完事。

总结：简化之后，vuex就功能较为单一，数据存取。不过本身很容易扩展，可以参考源码进行修改

目前设计方案是只将vuex作为状态机，只做简单存取值，所以只会存在一个 Mutation和一个Action 。

当然你也可以自己扩展，只要将store.js中的actions和mutations换成函数，然后再适当修改源码即可。

工欲善其事，必先利其器

高级用法请前往 => 我的Github

• Vuex官网

• [vuex-convert源码] (https://github.com/Pszz)