Vue:vuex

一、vuex概述

1、vue插件

vuex 是实现数据集中式状态管理的插件。数据由 vuex 统一管理。其它组件都去使用 vuex 中的数据。只要有其中一个组件去修改了这个共享的数据,其它组件会同步更新。

2、全局事件总线和 vuex 插件的区别

全局事件总线关注点:组件和组件之间数据如何传递,一个绑定$on,一个触发$emit。数据实际上还是 在局部的组件当中,并没有真正的让数据共享。只是数据传来传去。

vuex 插件的关注点:共享数据本身就在 vuex 上。其中任何一个组件去操作这个数据,其它组件都会同步更新。是真正意义的数据共享。

 

 3、vuex的使用场景

多个组件之间依赖于同一状态。来自不同组件的行为需要变更同一状态。

4、搭建vuex环境 

①安装vuex:

vue2:npm i vuex@3       vue3: npm i vuex@4

②创建目录和 js 文件

③创建store.js文件

//引入vue
import Vue from 'vue'
//引入vuex插件
import Vuex from 'vuex';
//使用插件
Vue.use(Vuex)
//创建三个核心对象
const actions = {}
const mutations = {}
const state = {}
// 创建store对象, 管理三个核心对象
const store = new Vue({
    //负责执行某个行为的对象
    actions: actions,
    //负责更新的对象
    mutations: mutations,
    //状态对象
    state: state
})
//导出store
export default store
//简写形式
// export default new Vuex.Store({ actions, mutations, state })

④在main.js里面导入store.js文件,完成之后所有的 vm vc 对象上会多一个$store 属性

通过vm.$store或者vc.$store来获取store对象

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
//引入store
import store from "./vuex/store"
new Vue({
  el: '#app',
  store: store,
  render: h => h(App)
})

二、vuex真实场景

1、App.vue

<template>
  <div>
    <h1>数字:{{ $store.state.num }}</h1>
    <button @click="plusOne">点击加1</button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    plusOne() {
      // this.$store.state.num++;
      this.$store.dispatch("plusOne", this.counter);
    },
  },
};
</script>

methods里面的函数

业务逻辑复杂,代码比较多,如果你将这些代码放到这里的话,这些业务逻辑代码无法得到复用。

无法在其他组件中使用,在其他组件中使用的时候,你还需要把这些代码再写一遍。

调用vuex的API。dispatch是vuex的API。调用这个方法之后,store对象中的plusOne这个action回调函数会被自动调用。

2、store.js

//引入vue
import Vue from 'vue'
//引入vuex插件
import Vuex from 'vuex';
//使用插件
Vue.use(Vuex)
//创建三个核心对象
const actions = {
    plusOne(context, val) {
        val = val + 1
        context.commit("PLUS_ONE", val)
    }
}
const mutations = {
    PLUS_ONE(state, val) {
        state.num += val
    }
}
const state = {
    num: 0
}
// 创建store对象, 管理三个核心对象
// const store = new Vue({
//     //负责执行某个行为的对象
//     actions: actions,
//     //负责更新的对象
//     mutations: mutations,
//     //状态对象
//     state: state
// })
// //导出store
// export default store
//简写形式
export default new Vuex.Store({ actions, mutations, state })

actions对象(负责执行某个行为的对象)

有N多个action,每一个action都是一个回调函数、在action这种回调函数中编写复杂的业务逻辑。

原则:action是专门用来处理业务逻辑,或者说发送AJAX请求的。

context参数:context是vuex的上下文,value参数:传过来的数据。 

 如果业务逻辑非常负责,需要多个 actions 中的方法联合起来才能完成,可以在回调函数中使用

context 继续调用 dispatch 方法触发下一个 action 方法的执行。 

mutations对象(负责更新的对象)

存在N多个mutation,每一个mutation都是一个回调函数,回调函数的作用是:更新state。

只要state一更新,因为是响应式的,所以页面就重新渲染了。

state参数:状态对象, value参数:上一环节传过来的数据。

state对象(状态对象)

等同于Vue当中的data(叫做状态),状态对象(数据对象),已经做了响应式处理的。

3、main.js

首先要引入store.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 引入Vuex插件中的核心对象store
import store from './vuex/store'
new Vue({
  el : '#app',
  // 一个全新的配置项,以前没有学过:store
  // 加上这个配置项之后,vm以及所有的vc对象上都会多一个属性:$store
  // 以后通过vm.$store或者vc.$store来获取store对象。
  //store : store,
  store,
  render : h => h(App),
})

new Vue里面的配置项

加上store : store,这个配置项之后,vm以及所有的vc对象上都会多一个属性:$store

以后通过vm.$store或者vc.$store来获取store对象。

4、getters配置项

const getters = {
    reversedName(state){ 
        return state.username.split('').reverse().join('')
    }
}
<template>
  <div>
    <h3>反转的用户名:{{ $store.getters.reversedName }}</h3>
  </div>
</template>

有很多getter,每一个getter可以看做一个计算属性,每一个getter方法都会自动接收一个state对象

类似于 Vue 当中的:data computed 的关系。 

四、代码的简单优化

1、mapState 和 mapGetters 的使用(优化计算属性) 

①使用 mapState mapGetters 进行名称映射,可以简化代码。

②使用 mapState mapGetters 的前提是先引入

 import {mapState, mapGetters} from 'vuex'

③mapState 如何使用,在 computed 当中使用 ES6 的语法

对象形式
...mapState({name:'name'})

数组形式

...mapState(['name'])

插值语法就可以修改为:{{name}}

④mapGetters 如何使用,在 computed 当中使用 ES6 的语法
对象形式
...mapGetters({reverseName:'reverseName'})
数组形式
...mapGetters([‘reverseName’])
插值语法就可以修改为: {{reverseName}}

2、 mapMutations 和 mapActions 的使用(优化 methods)

import {mapMutations, mapActions} from 'vuex' methods : {
    // 对象写法
    ...mapActions({add:'plusOne',reverseName:'reverseName'})
    // 数组写法(前提是:保证 methods 中的方法名和 actions 中的方法名一致)
    ...mapActions(['plusOne', 'reverseName'])
}

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IsLuNaTiC

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值