Vuex 基础使用

前言 vuex 是 vue 官方出的一个全局的状态管理模式，能够理解为一个 vuex 项目的全局变量吧，再构建大型项目的时候，咱们可能会须要用到它。下面就来学一下怎么去使用它吧（本文偏向于具体使用，如要深刻学习，请看官方文档）。

1 安装

咱们要用啥就要先装啥，直接 npm install 就好了

npm install vuex

2 文件结构

vuex 的也是 vue 项目中的一个模块，使用咱们通常会用一个 store 文件夹去存放属于 vuex 的文件。他通常是有下面这些模块

2.1 state.js

这个的里面就放着 vuex 的 state 数据，我的理解这个就是一个一个全局变量库。

let state = {
    dept: 'TT',
    num: 'S0171',
}

export default state;

2.2 getters.js

除了咱们默认的 state 状态以外，还会有一些相似组件中的计算属性的派生的状态，他定义的时候和定义计算属性是同样的，可是要传入一个 state 做为参数。

// 使用箭头函数，简洁好看
let getters = {
    deptNo: state => state.dept + state.num
}
export default getters;

2.3 mutations.js

更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似于事件：每一个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是咱们实际进行状态更改的地方，而且它会接受 state 做为第一个参数,而后还能够传入一个额外的参数，即载荷（payload），咱们通常可使用这个 payload 传入一些修改时须要的参数。

此外 vuex 官方是推荐用常量做为事件类型，使用咱们通常也就按照推荐的来咯，当项目足够大的时候，咱们还会搞多一个 mutation-type.js 文件来存放这些事件类型，可是如今咱们就先把他们都写一块儿了。

// 事件类型
const SET_DEPT = 'SET_DEPT'

const mutation = {
    // 回调函数，就处理 state 的方法啦
    [SET_DEPT](state, payload) {
        state.dept = payload.dept;
    }
}

export default mutation;

2.4 actions.js

因为 mutation 里面不支持异步操做，因此当咱们须要在 vuex 里面执行异步操做的时候,就要用到 action 了，不过要注意 action 只是提供异步操做的机会，可是若是要修改 state 的数据的时候，仍是要用到 mutation 里面的同步事件。

他的声明方式和 action 是差很少的

const ASET_DEPT = 'ASET_DEPT'
const actions = {
    [ASET_DEPT](context,payload){
        setTimeout(()=>{
            context.commit('SET_DEPT',payload.dept);
        },2000)
    },
}
export default actions;

2.5 index.js

这个就直接 vuex 的入口文件了，在这边要建立 store 实例，并将其导出,咱们就要把咱们以前搞的全部都丢到这里面来，而后建立一个 store 实例。

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

import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

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

最后咱们只要在建立 vue 的实例的 main.js 文件里面导入 store 模块，并在初始化 vue 实例的时候引进去就成功搭建了一个全局的状态仓库了。

3 使用

前面咱们说了这么去搭这个仓库，如今咱们已经搭好了，就要知道这么去使用这个仓库的数据。

3.1 state 数据的获取

这个因为咱们是在根 vue 实例就引入了 store，而后咱们通常是在计算属性中去拿取 vuex 的状态

computed :{
    dept(){
        this.$store.state.dept
    }
}

为了减小咱们的工做量，vuex 还给咱们贴心准备了辅助函数 mapState

// 引入
import { mapState } from "vuex";

computed: {
    ...mapState({
      name: state => state.Deno.name,
      dept: state => state.dept,
    })
    // 当 computed 里面的计算属性的名称和 state 里面名称同样时，还能够这么写
    ...mapState([
      'name','dept'
    ])
  },

3.2 getter 的获取

这个和 state 差很少，直接发代码了

computed: {
    deptNo() {
      return this.$store.getters.deptNo;
    },
}

而后他也有一个辅助函数 mapGetters。用法就

computed: {
    ...mapGetters({
      deptNo: 'deptNo',
    })
    // 当 computed 里面的计算属性的名称和 state 里面名称同样时，还能够这么写
    ...mapState([
      'deptNo'
    ])
  },

3.3 mutation 的使用

mutation 是事件，也就是方法啦，因此咱们用方法的形式去使用它。咱们能够直接使用

this.$store.commit('SET_DEPT', {
  dept: 'QQ'
})

也能够用辅助函数 mapMutations 映射为本地方法

...mapMutations(["SET_DEPT"]),
...mapMutations({
    setDept: "SET_DEPT"
}),

而后直接调用

this.SET_DEPT('QQ');
this.setDept('QQ');

3.4 action 的使用

action 也是方法啦，因此他的使用和 mutation 是差很少的。

this.$store.dispatch('ASET_DEPT',{dept:'QQ'})

它的辅助函数是 mapActions，用它映射为本地方法。

...mapActions({
  aSetDept: 'ASET_DEPT',
}),
...mapActions([
  'ASET_DEPT'
])

关于 vuex 的简单使用就说明到这边了，可是因为有时候咱们的项目是很是大，使用单一的一个 state 来存数据可能会致使数据太多，太杂，因此 vuex 还有一个 module 的机制，你们能够去官网看文档或者看个人下一篇文章。文章就写到这里啦，若是你们发现我哪边写错的话，还望指出勘误，期待与你们一块儿学习进步。