前端之vue的vuex插件(多组件共享数据)

2022年6月20日11:16:51

vuex插件

前端之vue的vuex插件(多组件共享数据)

使用条件
前端之vue的vuex插件(多组件共享数据)

实现多组件共享数据的方法

方法一:全局事件中线(乱)

前端之vue的vuex插件(多组件共享数据)

方法二:vuex实现多数组共享数据√

前端之vue的vuex插件(多组件共享数据)

vuex工作原理

前端之vue的vuex插件(多组件共享数据)
如下图, 如果知道自己要做什么, 也知道数据可以跳过上方API
前端之vue的vuex插件(多组件共享数据)
如下图,dispatch、commit方法都是store的。
前端之vue的vuex插件(多组件共享数据)

vue2中使用vuex小结:

前端之vue的vuex插件(多组件共享数据)
前端之vue的vuex插件(多组件共享数据)
基本使用
前端之vue的vuex插件(多组件共享数据)
前端之vue的vuex插件(多组件共享数据)

vue3搭建vuex环境

步骤总览

前端之vue的vuex插件(多组件共享数据)

简单vuex实例

前端之vue的vuex插件(多组件共享数据)
state用于存储数据
getters 加工数据

1.命令行安装vuex
前端之vue的vuex插件(多组件共享数据)
npm i vuex@版本
–save放入依赖

npm i vuex@4 --save

2.在main.js中引入并使用vuex创建一个store实例

/**
 * 本文件是整个项目的入口文件
 */import{ createApp}from'vue'import Appfrom'./App.vue'// 1.引入vueximport{ createStore}from"vuex";// 2.创建一个新的storeconst store=createStore({state(){return{sum:0}},actions:{},mutations:{}})const app=createApp(App)// 3.将store实例作为插件安装
app.use(store)

app.mount('#app')

3.在模板中使用

<template><div><h1>当前求和为:{{ $store.state.sum }}</h1></div></template>

4.发送到actions进行处理

methods:{increment(){this.$store.dispatch("increment",this.selectNum);},}

4.在actions阶段, 用context参数调用commit进入mutations阶段,注意第一参数全部大写.

actions:{increment(context,value){
      context.commit('INCREMENT', value)}},

如果跳过actions阶段,
commit直接进入mutations阶段
commit的第一个参数要全大写

methods:{increment(){this.$store.commit("INCREMENT",this.selectNum);},},

5.在mutations内编写对应函数

const store=createStore({state(){return{sum:0,}},actions:{// 本次简单实例不用actions, 直接进行commit},mutations:{INCREMENT(state,value){
      state.sum+=value;},}})

getters的使用

vuex实例中的getters用来对state内的数据进行加工使用
可以类比data和computed
1.在main.js中的vuex实例(即store)配置

const store=createStore({state(){return{sum:0,}},actions:{},mutations:{},getters:{bigSum(state){return state.sum*10;}}})

2.在模板中使用{{ $store.getters.bigSum }}

<template><div><h1>当前求和为:{{ $store.state.sum }}</h1><h2>当前求和扩大十倍后为:{{ $store.getters.bigSum }}</h2></div></template>

小结:
前端之vue的vuex插件(多组件共享数据)

  • 作者:一只爱吃萝卜的小兔子
  • 原文链接:https://blog.csdn.net/weixin_46372074/article/details/124781169
    更新时间:2022年6月20日11:16:51 ,共 1571 字。