【vuex小试牛刀】

了解vuex核心概念请移步 https://vuex.vuejs.org/zh/

img

# 一、初始vuex

# 1.1 vuex是什么

就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用

父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护

# 1.2 vuex中有什么

const store = new Vuex.Store({
    state: {
        name: 'weish',
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit('SET_AGE', 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

这个就是最基本也是完整的vuex代码；vuex 包含有五个基本的对象

  • state：存储状态。也就是变量；
  • getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
  • mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit('SET_AGE', 18)。和vue中的methods类似。
  • actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。
  • modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()

# 1.3 vue-cli中使用vuex的方式

目录结构

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 跟级别的 state
    ├── getters.js        # 跟级别的 getter
    ├── mutation-types.js # 根级别的mutations名称（官方推荐mutions方法名使用大写）
    ├── mutations.js      # 根级别的 mutation
    ├── actions.js        # 根级别的 action
    └── modules
        ├── m1.js         # 模块1
        └── m2.js         # 模块2

state示例

const state = {
    name: 'weish',
    age: 22
};
export default state;

getter示例

getters.js示例（我们一般使用getters来获取state的状态，而不是直接使用state）

export const name = (state) => {
    return state.name;
}
export const age = (state) => {
    return state.age
}
export const other = (state) => {
    return `My name is ${state.name}, I am ${state.age}.`;
}

mutation-type示例

将所有mutations的函数名放在这个文件里

export const SET_NAME = ‘SET_NAME’;

export const SET_AGE = ‘SET_AGE’;

mutations示例

import * as types from ‘./mutation-type.js’;

export default {

[types.SET_NAME](state, name) {

state.name = name;

},

[types.SET_AGE](state, age) {

state.age = age;

}

};

actions示例

异步操作、多个commit时

import * as types from ‘./mutation-type.js’;

export default {

nameAsyn({commit}, {age, name}) {

commit(types.SET_NAME, name);

commit(types.SET_AGE, age);

}

}

modules–m1.js示例

如果不是很复杂的应用，一般来讲是不会分模块的

export default {

state: {},

getters: {},

mutations: {},

actions: {}

}

index.js示例（组装vuex)

import vue from ‘vue’;

import vuex from ‘vuex’;

import state from ‘./state.js’;

import * as getters from ‘./getters.js’;

import mutations from ‘./mutations.js’;

import actions from ‘./actions.js’;

import m1 from ‘./modules/m1.js’;

import m2 from ‘./modules/m2.js’;

import createLogger from ‘vuex/dist/logger’; // 修改日志

vue.use(vuex);

const debug = process.env.NODE_ENV !== ‘production’; // 开发环境中为true，否则为false

export default new vuex.Store({

state,

getters,

mutations,

actions,

modules: {

m1,

m2

},

plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改

});

最后将store实例挂载到main.js里面的vue上去就行了

import store from ‘./store/index.js’;

new Vue({

el: ‘#app’,

store,

render: h => h(App)

});

在vue组件中使用时，我们通常会使用mapGetters、mapActions、mapMutations，然后就可以按照vue调用methods和computed的方式去调用这些变量或函数，示例如

import {mapGetters, mapMutations, mapActions} from ‘vuex’;

/* 只写组件中的script部分 */

export default {

computed: {

…mapGetters([

name,

age

])

},

methods: {

…mapMutations({

setName: ‘SET_NAME’,

setAge: ‘SET_AGE’

}),

…mapActions([

nameAsyn

])

}

};

# 二、modules

在 src 目录下 , 新建一个 store 文件夹 , 然后在里面新建一个 index.js

import Vue from ‘vue’

import vuex from ‘vuex’

Vue.use(vuex);

export default new vuex.Store({

state:{

show:false

}

})

在 main.js 里的代码应该改成,在实例化 Vue对象时加入 store 对象

//vuex

import store from ‘./store’

new Vue({

el: ‘#app’,

router,

store,//使用store

template: ‘<App/>’,

components: { App }

})

这样就把 store 分离出去了 , 那么还有一个问题是 : 这里 $store.state.show 无论哪个组件都可以使用 , 那组件多了之后 , 状态也多了 , 这么多状态都堆在 store 文件夹下的 index.js 不好维护怎么办 ?

  • 我们可以使用 vuex 的 modules , 把 store 文件夹下的 index.js 改成
import Vue from ‘vue’

import vuex from ‘vuex’

Vue.use(vuex);

import dialog_store from ‘…/components/dialog_store.js’;//引入某个store对象

export default new vuex.Store({

modules: {

dialog: dialog_store

}

})

这里我们引用了一个 dialog_store.js , 在这个 js文件里我们就可以单独写 dialog 组件的状态了

export default {

state:{

show:false

}

}

做出这样的修改之后 , 我们将之前我们使用的 s t o r e . s t a t e . s h o w < / c o d e > 统统改为 < c o d e > store.state.show</code> 统统改为 <code> store.state.show</code>统统改为<code>store.state.dialog.show 即可

  • 如果还有其他的组件需要使用 vuex , 就新建一个对应的状态文件 , 然后将他们加入 store文件夹下的 index.js文件中的 modules 中
modules: {

dialog: dialog_store,

other: other,//其他组件

}

# 三、mutations

对vuex 的依赖仅仅只有一个 $store.state.dialog.show 一个状态 , 但是如果我们要进行一个操作 , 需要依赖很多很多个状态 , 那管理起来又麻烦了

  • mutations里的操作必须是同步的
export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//这里的state对应着上面这个state
            state.show = state.show?false:true;
            //你还可以在这里执行其他的操作改变state
        }
    }
}

使用 mutations 后 , 原先我们的父组件可以改为

<template>
  <div id="app">
    <a href="javascript:;" @click="$store.commit('switch_dialog')">点击</a>
    <t-dialog></t-dialog>
  </div>
</template>
<script>
import dialog from './components/dialog.vue'
export default {
  components:{
    "t-dialog":dialog
  }
}
</script>

使用 $store.commit('switch_dialog') 来触发 mutations 中的 switch_dialog 方法

# 四、actions

多个 state 的操作 , 使用 mutations会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了

export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//这里的state对应着上面这个state
            state.show = state.show?false:true;
            //你还可以在这里执行其他的操作改变state
        }
    },
    actions:{
        switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法
            context.commit('switch_dialog');
            //你还可以在这里触发其他的mutations方法
        },
    }
}

那么 , 在之前的父组件中 , 我们需要做修改 , 来触发 action 里的 switch_dialog 方法

<template>
  <div id="app">
    <a href="javascript:;" @click="$store.dispatch('switch_dialog')">点击</a>
    <t-dialog></t-dialog>
  </div>
</template>
<script>
import dialog from './components/dialog.vue'
export default {
  components:{
    "t-dialog":dialog
  }
}
</script>
  • 使用 $store.dispatch('switch_dialog') 来触发 action 中的 switch_dialog 方法。
  • 官方推荐 , 将异步操作放在 action中

# 五、getters

getters和 vue 中的computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的

  • 假如我们需要一个与状态 show 刚好相反的状态 , 使用 vue 中的 computed 可以这样算出来
computed(){
    not_show(){
        return !this.$store.state.dialog.show;
    }
}

那么 , 如果很多很多个组件中都需要用到这个与 show刚好相反的状态 , 那么我们需要写很多很多个 not_show, 使用 getters就可以解决这种问题

export default {
    state:{//state
        show:false
    },
    getters:{
        not_show(state){//这里的state对应着上面这个state
            return !state.show;
        }
    },
    mutations:{
        switch_dialog(state){//这里的state对应着上面这个state
            state.show = state.show?false:true;
            //你还可以在这里执行其他的操作改变state
        }
    },
    actions:{
        switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法
            context.commit('switch_dialog');
            //你还可以在这里触发其他的mutations方法
        },
    }
}

我们在组件中使用 $store.state.dialog.show 来获得状态 show , 类似的 , 我们可以使用 $store.getters.not_show 来获得状态 not_show

  • 注意 : $store.getters.not_show 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改

# 六、mapState、mapGetters、mapActions

很多时候 , $store.state.dialog.show 、$store.dispatch('switch_dialog') 这种写法很不方便

  • 使用 mapState、mapGetters、mapActions 就不会这么复杂了
<template>
  <el-dialog :visible.sync="show"></el-dialog>
</template>
<script>
import {mapState} from 'vuex';
export default {
  computed:{
    //这里的三点叫做 : 扩展运算符
    ...mapState({
      show:state=>state.dialog.show
    }),
  }
}
</script>

相当于

<template>
  <el-dialog :visible.sync="show"></el-dialog>
</template>
<script>
import {mapState} from 'vuex';
export default {
  computed:{
    show(){
        return this.$store.state.dialog.show;
    }
  }
}
</script>

mapGetters、mapActions 和 mapState 类似 , mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/688534.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

高考志愿填报有哪些技巧和方法

高考志愿填报有哪些技巧和方法

一年一度高考季&#xff0c;又高考志愿填报的时侯了。高考志愿填报的时侯&#xff0c;需要考虑的因素比较多&#xff0c;有的同学觉是离家越远越好&#xff0c;要放飞自我&#xff0c;家长再也管不了我了。有的同学觉得专业比学校牌子重要&#xff0c;只要报个好专业&#xff0…
阅读更多...
ros2笔记

ros2笔记

Ros2 hello world ccreate packagehelloworld.cpp hello world pythonhelloworld.py file explainros2 cmdcreatebuildfindruninstall interfacesmsg filesrv fileaction file Topic hello world c mkdir -p {your workspace name}/src cd {your workspace name} #进入工作空间…
阅读更多...
linux 服务器上离线安装 node nvm

linux 服务器上离线安装 node nvm

因为是离线环境 如果你是可以访问外网的 下面内容仅供参考 也可以继续按步骤来 node 安装路径 Node.js — Download Node.js nvm 安装路径 Tags nvm-sh/nvm GitHub 后来发现 nvm安装后 nvm use 版本号 报错 让我去nvm install 版本 我是内网环境 install不了 下面 你要 把安…
阅读更多...
Java——面向对象进阶（一）

Java——面向对象进阶（一）

前言 面向对象进阶(一)&#xff1a;static&#xff0c;继承&#xff0c;this和super关键字 文章目录 一、static1.1 静态变量1.2 静态方法1.3 静态变量和静态方法在内存中 二、继承2.1 概念2.2 继承的特点和能继承什么2.3 继承中的重写2.4 this和super关键字 一、static 在 Jav…
阅读更多...
Isaac Lab CartPole实验（摄像头版本）

Isaac Lab CartPole实验（摄像头版本）

Isaac Lab安装可以看这个教程&#xff1a;http://t.csdnimg.cn/SN7duhttp://t.csdnimg.cn/SN7du 1. 问题定义与建模 问题描述&#xff1a;CartPole问题是一个经典的强化学习问题&#xff0c;cartpole 由 cart和pole构成&#xff0c;其中一个小车&#xff08;Cart&#xff09;上…
阅读更多...
上市公司绿色并购数据+do文件（1996-2024.4）

上市公司绿色并购数据+do文件（1996-2024.4）

数据简介&#xff1a;手工搜集重污染上市公司的并购公告&#xff0c;采用内容分析法&#xff0c;对每次并购的背景和目的&#xff0c;主并企业和标的企业经营范围以及该次并购对主并企业带来的影响进行综合分析&#xff0c;逐一判断该项并购事件是否为绿色并购 时间跨度&#…
阅读更多...
幽门螺杆菌感染关联和有哪些自然战斗者

幽门螺杆菌感染关联和有哪些自然战斗者

谷禾健康 幽门螺杆菌(helicobacterpylori&#xff0c;H.pylori)是革兰氏阴性&#xff0c;螺旋形&#xff0c;微需氧细菌&#xff0c;是一种独特的&#xff0c;能持续定植于人类胃粘膜并能引起胃感染的细菌。 世界上有超过一半的人感染了幽门螺杆菌&#xff0c;但很多没有临床症…
阅读更多...
问题：新零售是以消费者体验为中心的数据驱动的泛零售形态,是基于大数据的“人货场“重构 #其他#知识分享

问题：新零售是以消费者体验为中心的数据驱动的泛零售形态,是基于大数据的“人货场“重构 #其他#知识分享

问题&#xff1a;新零售是以消费者体验为中心的数据驱动的泛零售形态,是基于大数据的"人货场"重构 参考答案如图所示
阅读更多...
stdlib.h: No such file or directory

stdlib.h: No such file or directory

Qt报错: error: stdlib.h: No such file or directory #include_next &#xff1c;stdl 报错&#xff0c; 其他博主的解决方法&#xff1a; Qt报错: error: stdlib.h: No such file or directory #include_next &#xff1c;stdl_qt5.15 无法打开包括文件“stdlib.h” no suc…
阅读更多...
临床应用的深度学习在视网膜疾病的诊断和转诊中的应用| 文献速递-视觉通用模型与疾病诊断

临床应用的深度学习在视网膜疾病的诊断和转诊中的应用| 文献速递-视觉通用模型与疾病诊断

Title 题目 Clinically applicable deep learning for diagnosis and referral in retinal disease 临床应用的深度学习在视网膜疾病的诊断和转诊中的应用 01 文献速递介绍 诊断成像的数量和复杂性正在以比人类专家可用性更快的速度增加。人工智能在分类一些常见疾病的二…
阅读更多...
【数据结构】图论入门

【数据结构】图论入门

引入 数据的逻辑结构&#xff1a; 集合&#xff1a;数据元素间除“同属于一个集合”外&#xff0c;无其他关系线性结构&#xff1a;一个对多个&#xff0c;例如&#xff1a;线性表、栈、队列树形结构&#xff1a;一个对多个&#xff0c;例如&#xff1a;树图形结构&#xff1…
阅读更多...
C++基础编程100题-005 OpenJudge-1.3-03 计算(a+b)/c的值

C++基础编程100题-005 OpenJudge-1.3-03 计算(a+b)/c的值

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0103/03/ 描述 给定3个整数a、b、c&#xff0c;计算表达式(ab)/c的值&#xff0c;/是整除运算。 输入 输入仅一行&#xff0c;包括三个整数a、b、c, 数与数之间以一个空格分开。(&#xff0d;10,000 < a,…
阅读更多...
创新指南 | 5个行之有效的初创企业增长策略

创新指南 | 5个行之有效的初创企业增长策略

本文探讨了五种初创企业实现快速增长的有效策略&#xff1a;利用网络效应通过激励和资本化用户增长&#xff1b;通过持续提供高质量内容建立信任和权威的内容营销&#xff1b;利用简单有效的推荐计划扩展用户群&#xff1b;采用敏捷开发方法快速适应市场变化和客户反馈&#xf…
阅读更多...
Flink中因java的泛型擦除导致的报错及解决

Flink中因java的泛型擦除导致的报错及解决

【报错】 Exception in thread "main" org.apache.flink.api.common.functions.InvalidTypesException: The return type of function Custom Source could not be determined automatically, due to type erasure. You can give type information hints by using th…
阅读更多...
【Stable Diffusion】（基础篇二）—— Stable Diffusion图形界面介绍和基本使用流程

【Stable Diffusion】（基础篇二）—— Stable Diffusion图形界面介绍和基本使用流程

本系列笔记主要参考B站nenly同学的视频教程&#xff0c;传送门&#xff1a;B站第一套系统的AI绘画课&#xff01;零基础学会Stable Diffusion&#xff0c;这绝对是你看过的最容易上手的AI绘画教程 | SD WebUI 保姆级攻略_哔哩哔哩_bilibili 在上一篇博客中&#xff0c;我们成功…
阅读更多...
【红黑树变色+旋转】

【红黑树变色+旋转】

文章目录 一. 红黑树规则二. 情况一叔叔存在且为红情况二.变色旋旋 一. 红黑树规则 对于红黑树&#xff0c;进行变色旋转处理&#xff0c;终究都是为了维持颜色以下几条规则&#xff0c;只有颜色和规则维持住了&#xff0c;红黑树就维持住了最长路径的长度不超过最短路径的两倍…
阅读更多...
MySQL之查询性能优化(十)

MySQL之查询性能优化(十)

查询性能优化 MySQL查询优化器的局限性 松散索引扫描 由于历史原因&#xff0c;MySQL并不支持松散索引扫描&#xff0c;也就无法按照不连续的方式扫描一个索引。通常&#xff0c;MySQL的索引扫描需要先定义一个起点和终点&#xff0c;即使需要的数据只是这段索引中很少数的几…
阅读更多...
WSDM2022推荐系统相关论文整理（一）

WSDM2022推荐系统相关论文整理（一）

2022年第15届国际网络搜索与数据挖掘会议WSDM在2022年2月21日到25日于线上举行&#xff0c;共收到了786份有效投稿&#xff0c;最终录取篇数为159篇&#xff0c;录取率为20.23%。作为主流的搜索与数据挖掘会议&#xff0c;论文的话题主要侧重于搜索、推荐以及数据挖掘领域&…
阅读更多...
【机器学习基础】Python编程06：五个实用练习题的解析与总结

【机器学习基础】Python编程06：五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言，它在机器学习领域中的重要性主要体现在以下几个方面： 简洁易学：Python语法简洁清晰，易于学习，使得初学者能够快速上手机器学习项目。 丰富的库支持：Python拥有大量的机器学习库，如scikit-learn、TensorFlow、Keras和PyTorch等，这些…
阅读更多...
【BOM02】本地存储

【BOM02】本地存储

一&#xff1a;什么是本地存储 数据存储在用户浏览器中&#xff0c;用户设置、读取方便&#xff0c;同时页面刷新时不会丢失数据。存储在浏览器中数据约5M&#xff0c;分为sessionStorage和localStorage两种存储方式 二&#xff1a;localStorage存储 作用 将数据永久存储在…
阅读更多...
最新文章

Copyright @ 2022~2023