Vuex 数据共享

文章目录

  • 前言
  • Vuex项目的创建
    • [state 配置项](#state 配置项)
    • [getters 配置项](#getters 配置项)
    • [mutations 配置项](#mutations 配置项)
    • [actions 配置项](#actions 配置项)

前言

提示:这里可以添加本文要记录的大概内容:

体现数据共享的概念

所有组件都可以使用那数据


提示:以下是本篇文章正文内容,下面案例可供参考

Vuex项目的创建

在创建Vuex项目的时候要注意勾选上Vuex选项,其他步骤不变

项目建好后:

比以往项目多一个store文件夹(存储的共享数据)

下面的index.js文件中是配置项

state 配置项

配置的是共享数据

在state配置项中加上name数据

javascript 复制代码
  // 配置的是共享数据
  state: {
    name: '葫芦娃救爷爷'
  },

这个数据在任何组件中都可以使用

在根组件化中添加:{``{ $store.state.数据名 }}

这里把vue的图标去了

javascript 复制代码
<template>
  <h1>{{ $store.state.name }}</h1>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

现在在另一个组件HelloWorld中试一下

因为HelloWorld组件中内容太多,这里只留了h1标签

另外把在根组件中添加的数据也加上去

javascript 复制代码
<h1>{{ $store.state.name }}</h1>

运行:可以看到根组件和HelloWorld中的数据都显示了出来

上面的输出体现了数据共享概念

在任何组件通过插值语法使用: $store.state.数据名

getters 配置项

配置的是访问数据的方法

在getters 配置项中加上state状态方法和name数据

javascript 复制代码
  // 配置的是访问数据的方法
  getters: {
    getName(state){
      return state.name
    }
  },

在根组件中加上getters方法

javascript 复制代码
<h1>{{ $store.getters.getName }}</h1>

getters 用的相对较少

mutations 配置项

改变共享数据的方法

在mutations配置项中加上changeName(旧名字,新名字){... }

javascript 复制代码
  // 配置的是改变共享数据的方法
  mutations: {
    changeName(state,newName){
    // 把新的名字赋值给共享数据name
      state.name = newName
    }
  },

在根组件的JavaScript代码中,需要定义changeData方法,在该方法中修改一个变量的值(这里取名abc)

javascript 复制代码
  data() {
    return {
      abc: ''
    }
  },

下面加个输入框和按钮,使用户在文本框中输入或者删除内容,abc变量的值就会自动更新。

html 复制代码
  <input type="text" v-model="abc">
  <button @click="f1">改变数据</button>

当用户在文本框中输入内容时,v-model="abc"绑定了<input>元素的值到Vue实例中的t变量。

接下来配置方法函数methods,这里在根组件中有个固定写法:this.$store.commit('index.js中的方法名',this.变量值)

javascript 复制代码
  methods: {
    f1(){
      // 调用mutations方法,固定写法
      this.$store.commit('changeName',this.abc)
    }
  },

actions 配置项

配置的是异步修改数据的方法

用延时执行模拟异步操作

在actions配置项中加上使用 setTimeout 方法模拟一个异步操作

javascript 复制代码
  actions: {
    asyncChange(state){
      window.setTimeout(()=>{
        state.commit('changeName','你还好吗')
      },3000)
    }
  },

接下来在根组件中加上异步修改按钮

javascript 复制代码
<button @click="f2">异步修改</button>

methods里面再定义一个f2方法,调用异步修改方法

javascript 复制代码
    f2(){
      // 调用异步修改方法
      this.$store.dispatch('asyncChange')

    }

相关推荐
Backstroke fish1 天前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小曲程序1 天前
vue3 封装request请求
java·前端·typescript·vue
Lysun0011 天前
[less] Operation on an invalid type
前端·vue·less·sass·scss
程序视点1 天前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā1 天前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
ZwaterZ1 天前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ2 天前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七2 天前
vue2-vuex
前端·vue
小小黑0072 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler2 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue