Vuex的使用

最新推荐文章于 2024-03-18 17:31:23 发布

uluy

最新推荐文章于 2024-03-18 17:31:23 发布

阅读量285

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/luyu_joker/article/details/126420419

版权

Vuex的使用

安装

// vue2安装
npm i vuex@3
// vue3安装
npm i vuex@4

配置

创建store文件夹和index.js
配置index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
    // state 统一定义数据,类似于组件里面的data,所有在vuex中使用的变量都要在这里声明和初始化
    state(){
        return {
        }
    },
    // mutations本质是js函数，专门用来修改state中的数据(必须是同步函数，不能有异步代码)
    // 载荷只能有一个，如果需要传入多个，可以写成对象形式
    mutations:{
        mutation名1：function(state [, 载荷]) {
        },
    },
    // getters 是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新。
    getters:{
        getter的名字1: function(state) {
          return 要返回的值
        }
    },
    // Action 本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作
    // action是间接修改state的,是通过调用 mutation来修改state
    actions:{
        // context对象会自动传入，它与store实例具有相同的方法和属性(context名字可改变)
        action的名字: function(context [, 载荷]) {
          // 1. 发异步请求, 请求数据
          代码段
          // 2. commit调用mutation来修改数据(一般与之对应的mutation名的命名都用全部大写之后的action名)
          context.commit('mutation名', 载荷)
        }
    }
})

在main.js中引入store

import store from "@/store"
new Vue({
    render: h => h(App),
    store
}).$mount('#app')

vuex分为五个大块

state：统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
mutations ：使用它来修改数据(类似于methods)
getters：类似于computed(计算属性，对现有的状态进行计算得到新的数据)
actions：发起异步请求
modules：模块拆分

state使用

// 方法一(直接使用)
this.$store.state.变量名

// 方法二(引入，之后可视为计算属性使用)
// 基于 Vuex 提供的 mapState 辅助函数，可以方便的把 Store 中指定的数据，映射为当前组件的计算属性
// 使用之前需要引入mapState,方法: import { mapState } from 'vuex';
computed:{
    ...mapState(['变量名1','变量名2']),
    ...mapState({'在当前组件中使用的变量名':'vuex仓库中的变量名'}),  //一次只能声明一个变量
}

mutations使用

// 方法一(直接使用)
this.$store.commit('mutation名', 实参);

// 方法二(引入，之后可视为methods方法使用)
// 基于 Vuex 提供的 mapMutations 辅助函数，可以方便的把 Store 中指定的方法，映射为当前组件的 methods
// 使用之前需要引入mapMutations,方法: import { mapMutations } from 'vuex';
methods:{
    ...mapMutations(['mutation名1','mutation名2']), 
    ...mapMutations({'在当前组件中使用的名字': 'mutation名'})
}

getter使用

// 方法一(直接使用)
this.$store.getters.getter的名字

// 方法二(引入，之后可视为计算属性使用)
// 基于 mapGetters 辅助函数，可以把 store 中的 getter 映射为当前组件的计算属性
// 使用之前需要引入mapGetters,方法: import { mapGetters } from 'vuex';
computed: { 
  ...mapGetters(['getter的名字']), 
  ...mapGetters({'在当前组件中使用的名字': 'getter的名字'})
}

actions使用

// 方法一(直接使用)
this.$store.dispatch('actions的名字', 参数)

// 方法二(引入，之后可视为methods方法使用)
// 基于 Vuex 提供的 mapActions 辅助函数，可以方便的把 Store 中指定的 Action，映射为当前组件的 methods
// 使用之前需要引入mapActions,方法: import { mapActions } from 'vuex';
computed: { 
  ...mapActions(['actions的名字']), 
  ...mapActions({'在当前组件中使用的名字': 'actions的名字'})
}

应用场景二(用modules来拆分复杂业务)

在中大型项目中，所有的全局数据、方法都集中在了一起，导致 Vuex 的结构混乱，不利于现阶段的开发和后期的维护

1. store/index.js配置

export default new Vuex.Store({
    // state: 用来保存所有的公共数据
    state: {},
    getters: {},
    mutations: {},
    actions: {},
    modules: {
        模块名1,模块名2
    }
})

2. 根据index.js中的模块名在同一目录下创建对应的js文件

export default {
    namespaced: true,//开启命名空间
    state: {
    },
    mutations: {
    },
    actions: {
    },
    getters: {},
}

3. 在组件中使用

// state使用
this.$store.state.模块名.变量名
...mapState('模块名',['变量名1','变量名2'])

// mutations使用
this.$store.commit('模块名/mutation名', 实参);
...mapMutaions('模块名',['方法名'])

// getters使用
this.$store.dispatch.模块名.变量名
...mapGetters('模块名',['变量名1','变量名2'])

// actions使用
this.$store.mapActions('模块名/actions名', 实参);
...mapActions('模块名',['方法名'])