Vuex拿到state中数据的3种方式与实例剖析

目录
  • Ⅰ、Vuex 简介:
    • 1、Vuex 是什么?
    • 2、Vuex 的图例讲解:
    • 3、Vuex 的配置过程:
  • Ⅱ、如何引入并使用 Vuex :
  • Ⅲ、实例剖析在 App.vue 中使用 state 的过程:
  • Ⅳ、小结:

Ⅰ、Vuex 简介:

1、Vuex 是什么?

答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;

而所谓状态就是指:组件中所维护的数据);

(简而言之:就是状态管理,解决复杂组件数据通信,状态共享;)

2、Vuex 的图例讲解:

其一、对 Vue Components 的理解:

Vue Components 是指:一个组件(如:compA.vue);

其二、对 State 的理解:

State 是指:存放数据的(数据最终是展示(render)在组件的模板(视图)中);

其三、对 Mutations 的理解:

Mutations 是指:用来存放修改方法的(且是同步的);

Vue Components 可以通过 commit修改 Mutations

其四、对 Actions 的理解:

Actions 是指:用来放异步操作的(如:ajax 请求);

Vue Components 可以通过 dispatch 派发 Action 的异步请求;

同时: Action 可以直接获取接口: Backend API, 或通过 Commit 来修改 Mutations 从而修改 State 数据;

3、Vuex 的配置过程:

其一、选择并下载 Vuex 版本的过程中:

注意:Vue2 是与 Vuex3相匹配的,而 Vue3 是与 Vuex4 相匹配的;

其二、打开终端并输入命令:

npm i vuex@3

Ⅱ、如何引入并使用 Vuex :

1、用 vue-cli 创建项目;

2、在 src 下建一个 store 文件夹并创建 index.js 文件;

其一、建成的文件夹如下所示:

其二、index.js 里面引入的 vuex 的代码为:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)  // 注意:一定要用 Vue.use() 注册一下;

const store = new Vuex.Store({   /* 此时的 Vuex.Store 就是一个构造函数(即:相当于一个实例); */
  // 定义状态的地方;
  state: {
    num: 1,
    school: {
        name: 'xuexiqianduan',
        age: 26
    }
  },
})

export default store
// 此时是导出 store 文件,便于挂载;

3、要在 main.js 文件中挂载一下:

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

Vue.config.productionTip = false

new Vue({
  store, /* 挂载到实例完成后,在 vue 项目的任何地方就都可以使用 store */
  render: h => h(App),
}).$mount('#app')

4、然后在 App.vue 中使用;

Ⅲ、实例剖析在 App.vue 中使用 state 的过程:

1、方式一:通过 $store.state.num 拿到数据;

其一、 此时的 App.vue 的代码为:

<template>
  <div id="app">
    <h1>真实用法:展示Vuex中的State</h1>
    <p>方式一: num: {{ $store.state.num }}</p>
     <!-- '$store'就是指:拿到已经挂载到实例上的 store 下的 index.js 的内容; -->
  </div>
</template>
<script>
export default {
  computed: {
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其二、页面的展示效果为:

其三、而此时 index.js 中的 num 的值为:

(即:已成功拿到了 index.js 中的 num 值;)

2、方式二:通过 {{ num }} 拿到数据;

其一、 此时的 App.vue 的代码为:

<template>
  <div id="app">
    <h1>真实用法:展示Vuex中的State</h1>
    <p>方式二: num: {{ num }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    num() {
      return this.$store.state.num;
    },
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其二、页面的展示效果为:

其三、而此时 index.js 中的 num 的值为:

(即:已成功拿到了 index.js 中的 num 值;)

3、方式三:通过 {{ num }} {{school.name}} 拿到数据;

其一、 此时的 App.vue 的代码为:

<template>
  <div id="app">
    <h1>真实用法:展示Vuex中的State</h1>
    <p>方式三:num: {{ num }}  school: {{ school.name }}</p>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['num','school']),
    // 该函数内部运行的返回值大致为:{num: () => this.$store.state.num, school: () => this.$store.state.school}
  }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其二、页面的展示效果为:

其三、而此时 index.js 中的 num 的值为:

(即:已成功拿到了 index.js 中的 num 值;)

Ⅳ、小结:

到此这篇关于Vuex拿到state中数据的3种方式与实例剖析的文章就介绍到这了,更多相关Vuex拿到state数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vuex提交state&&实时监听state数据的改变方法

    项目背景 websocket长连接 根据指示进行四个页面之间的跳转,在各页面执行相应的逻辑处理. 项目搭建结构如下所示: 解决方案 在四个页面外面写个父页面,router路径如下所示: vuex \src\store\mutations.js //存储到vuex里面 [WEBSOCKETDATA](state,socketdata){ state.socketData=null;//vue监听不到数组的改变 所以清空重置一下就好咯 state.socketData=socketdata } \s

  • 使用vuex解决刷新页面state数据消失的问题记录

    在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. 言而总之: 实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该

  • 解决vue页面刷新vuex中state数据丢失的问题

    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store

  • Vuex拿到state中数据的3种方式与实例剖析

    目录 Ⅰ.Vuex 简介: 1.Vuex 是什么? 2.Vuex 的图例讲解: 3.Vuex 的配置过程: Ⅱ.如何引入并使用 Vuex : Ⅲ.实例剖析在 App.vue 中使用 state 的过程: Ⅳ.小结: Ⅰ.Vuex 简介: 1.Vuex 是什么? 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式: 而所谓状态就是指:组件中所维护的数据); (简而言之:就是状态管理,解决复杂组件数据通信,状态共享:) 2.Vuex 的图例讲解: 其一.对 Vue Component

  • java从命令行获取数据的三种方式代码实例

    这篇文章主要介绍了java从命令行获取数据的三种方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种:利用Scanner对象 import java.util.Scanner; public class TestInputOuput { public static void main(String[] args) { System.out.println("请输入:"); Scanner inp = new Scanne

  • VUE:vuex 用户登录信息的数据写入与获取方式

    整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI

  • iOS开发中UIWebView的加载本地数据的三种方式

    UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): UIWebView加载内容的三种方式: 1 加载本地数据文件 指定文件的MIMEType 编码格式使用@"UTF-8" 2加载html字符串(可以加载全部或者部分html

  • python读取文本中数据并转化为DataFrame的实例

    在技术问答中看到一个这样的问题,感觉相对比较常见,就单开一篇文章写下来. 从纯文本格式文件 "file_in"中读取数据,格式如下: 需要输出成"file_out",格式如下: 数据的原格式是"类别:内容",以空行"\n"为分条目,转换后变成一个条目一行,按照类别顺序依次写出内容. 建议读取后,使用pandas,把数据建立称DataFrame的表格.这样方便以后处理数据.但是原格式并不是通常的表格格式,所以要先做一些简单的处理

  • 使用vuex的state状态对象的5种方式

    vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count:66 } export default state //index.js import Vue from 'vue' import Vuex from 'vuex' i

  • 浅谈TensorFlow中读取图像数据的三种方式

    本文面对三种常常遇到的情况,总结三种读取数据的方式,分别用于处理单张图片.大量图片,和TFRecorder读取方式.并且还补充了功能相近的tf函数. 1.处理单张图片 我们训练完模型之后,常常要用图片测试,有的时候,我们并不需要对很多图像做测试,可能就是几张甚至一张.这种情况下没有必要用队列机制. import tensorflow as tf import matplotlib.pyplot as plt def read_image(file_name): img = tf.read_fil

  • java中List去除重复数据的5种方式总结

    前言 List 是一个接口,它继承于Collection的接口.它代表着有序的队列.当我们讨论List的时候,一般都和Set作比较. List中元素可以重复,并且是有序的(这里的有序指的是按照放入的顺序进行存储.如按照顺序把1,2,3存入List,那么,从List中遍历出来的顺序也是1,2,3). Set中的元素不可以重复,并且是无序的(从set中遍历出来的数据和放入顺序没有关系). 以下介绍五种-不同的方法去除 Java 中ArrayList中的重复数据 1.使用LinkedHashSet删除

  • MongoDB中优雅删除大量数据的三种方式

    目录 为什么要"瘦身"呢? MongoDB中删除数据的三种方式 三种方式的执行效率对比 1. remove 2. deleteMany 3. bulkWrite 通过 Write Concern 规避主从延迟 删除过程中遇到的Bug 总结 删除大量数据,无论是在哪种数据库中,都是一个普遍性的需求.除了正常的业务需求,我们需要通过这种方式来为数据库"瘦身". 为什么要"瘦身"呢? 1.表的数据量到达一定量级后,数据量越大,表的查询性能会越差. 毕竟

  • 基于$.ajax()方法从服务器获取json数据的几种方式总结

    一.什么是json json是一种取代xml的数据结构,和xml相比,它更小巧但描述能力却很强,网络传输数据使用流量更少,速度更快. json就是一串字符串,使用下面的符号标注. {键值对} : json对象 [{},{},{}] :json数组 "" :双引号内是属性或值 : :冒号前为键,后为值(这个值可以是基本数据类型的值,也可以是数组或对象),所以 {"age": 18} 可以理解为是一个包含age为18的json对象,而[{"age":

随机推荐