美文网首页Vue技术
vuex的使用场景和基本用法

vuex的使用场景和基本用法

作者: 上海_前端_求内推 | 来源:发表于2021-05-08 15:56 被阅读0次

一、vuex是什么?
vuex是一个用来管理组件之间通信的插件,它是一个专为【vue.js】应用程序开发的状态管理模式,它解决了组件之间同一状态的共享问题,它能够更好地在组件外部管理状态。

二、为什么需要vuex?
当多个组件依赖于同一个状态时,由于多层组件之间的嵌套使得传参数的方法变得更加复杂,另外如果使用父子组件直接饮用或者通过事件来变更和同步状态的多酚拷贝,会使得该模式变得脆弱,从而无法维护代码。

三、什么时候什么情况下使用vuex?
构建一个中大型单页应用,需要考虑到如何更好地在组件外部管理状态。

注意:如果不是开发大型单页应用,使用vuex可能是繁琐冗余的,也就是本来很快就可以开发完成的项目,用了vuex,结果却复杂了。一般简单的store模式就可以了。

四、vuex的五个核心概念?
state、getters、mutations、actions、modules

① state:存放的属性(数据变量)。

② getters:从基本数据(state)派生的数据,相当于state的计算属性。

③ mutations;同步提交更新数据的方法。必须是同步的(异步的话使用action)。每个mutations都有一个字符串的事件类型(type)和一个回调函数(hander)。

④ actions:异步提交更新数据的犯法。和mutations的功能是大致相同的,不过不同之处:actions提交的是mutations,而不是直接去修改state里面的数据变量。actions可以包含任意异步操作。

⑤ modules:vuex模块化。当应用变得复杂时,也就是中大型项目,store对象中的数据就变得非常的庞大。为了解决这个问题,vuex允许将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是以同样的方式一直分割下去。
一、适合初学者使用,保存数据以及获取数据

1、在store文件夹,新建个index.js文件(命名看个人习惯,如果没有该文件夹,可以新建一个,当然也可以不建文件夹,直接新建个js文件也是可以的)

在新建的js文件中写入如下代码:

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        pathName: "",
        currDbSource: {},
        currJobData: {},
        DbSource: []
    },
    mutations:{
        // 保存当前菜单栏的路径
        savePath(state,pathName){
            state.pathName = pathName;
        },
        // 保存当前点击的数据源
        saveCurrDbSource(state,currDbSource){
            state.currDbSource = currDbSource;
        },
        // 保存当前点击的元数据
        saveCurrJobData(state,currJobData){
            state.currJobData = currJobData;
        },
        // 保存所有数据源
        saveDbSource(state,DbSource){
            state.DbSource = DbSource;
        }
    }
})

这里解释一下各个代码段的作用:state是自定义的一些变量,需要用来保存数据,mutations是用来触发事件,相当于方法,用户需要通过触发这个方法,借此来保存数据,参数的话,第二个参数就是用户传入的值,然后在方法中赋值给state中的变量

2、main.js引用:(注意路径即可)

// 引入vuex-store
import store from './store/index';
 
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

3、保存数据:(场景举例:当我点击按钮后,我需要把当前的数据保存到vuex中,然后跳转到别的路由,然后使用这些数据)

methods:{
    click(){
        // 点击按钮进行一些操作,然后保存数据
        this.$store.commit('saveCurrDbSource',this.db)
    }
}

这里的第一个参数是要触发的方法,也就是上面mutations中的方法,第二个参数是你要传递的数据

4、获取变量:(当数据初始获取不到时,可以使用计算属性用来获取)

this.$store.state.变量名
 
// 例如
this.store.state.currDbSource

这样其他组件就可以共用这个保存起来的数据了,也能进行相应的修改

相关文章

  • vuex的使用场景和基本用法

    一、vuex是什么?vuex是一个用来管理组件之间通信的插件,它是一个专为【vue.js】应用程序开发的状态管理模...

  • VUEX基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • VUEX 基本用法

    首先打开vuex的官方文档,看看这张图 actions跟mutations差不多,但是action不直接修改sta...

  • vuex的基本用法

    个人对vuex的理解是,state中定义的变量类似java中的全局变量,将各组件用到的变量集中起来,统一管理,而g...

  • Vuex源码解析

    手写vuex核心代码 vuex基本用法 分析 我们是通过new Vuex.store(option)获得一个sto...

  • 通过一个简单实例了解vuex

    简单说明 什么是vuex,vuex怎么使用,什么场景下适合使用vuex, vuex 文档中都有介绍。看完文档之后,...

  • UIViewController的四种切换模式

    presentViewController: 使用场景 模态的展现另一个UIViewController 基本用法...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • vuex@2.x 文档

    1、https://vuex.vuejs.org/zh-cn/2、vuex 使用文档3、vuex2.0 基本使用(...

  • AFNetWorking

    AFNetworking的基本使用 网络请求 AFNetworking的基本用法和NSURLSession的用法基...

网友评论

    本文标题:vuex的使用场景和基本用法

    本文链接:https://www.haomeiwen.com/subject/jhiudltx.html