Vuex 基础使用

2024年2月13日 147次阅读 来源: 小红帽

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

    原文作者：小红帽
    原文地址: https://segmentfault.com/a/1190000019894774
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞