乐趣区

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 的机制,大家可以去官网看文档或者看我的下一篇文章。文章就写到这里啦,如果大家发现我哪边写错的话,还望指出勘误,期待与大家一起学习进步。

退出移动版