Vuex中的State使用介绍


Posted in Javascript onJanuary 19, 2019

现在在上一篇为什么要使用Vuex的介绍理解基础上使用Vuex中的State,一个正面例子来证实,同时也介绍一下Vue核心概念State。

Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

Vuex的使用

引入Vuex

方式一(推荐使用):

首先我们在 vue.js 2.0+ 开发环境中安装 vuex :

npm install vuex --save

方式二:

1.在package.json中的dependencies字段加入:"vuex": "^3.0.0"后:

"dependencies": {
  "vue": "^2.5.2",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.0"
 },

2.终端cd到项目目录然后执行:npm install安装即可。然后在运行项目

使用Vuex

1.在 src/main.js全局 中加入 :

import Vue from 'vue'
import App from './App'
import router from './router'
// 全局加入vuex
import Vuex from 'vuex'
//通过Vue.use()来使用这个Vuex
Vue.use(Vuex)
// 引入我们分离出来的vuex文件
import {store} from './store/store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件;这里可以简写成一个store
 store:store,//所有的组件对象都多了一个属性:$store
 router,
 components: { App },
 template: '<App/>'
})

Vuex中的State使用介绍

2.在src目录下新建store文件夹;在该文件夹下新建store.js文件。store.js中代码如下:

// 在分离出来的vuex文件中安装 Vuex 
import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 
export const store = new Vuex.Store({ 
  state: { // 把页面显示数据写在store.js文件 
    goodsList: [ 
      { name: '赣州橙子', price: '8.8' }, 
      { name: '新疆哈密瓜', price: '2.0' }, 
      { name: '山东大枣', price: '3.2' }, 
      { name: '阳澄湖大闸蟹', price: '10.0' } 
    ] 
  } 
})

3.获取数据。

由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态或直接使用$store.state.属性名获取vuex中的数据。通过在根实例中注册 store 选项,该 $store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。

page3.vue和page4.vue代码:

page3.vue

<template>
  <div>
    <h2>我是第一个页面</h2><br>
    <router-link to='/page4'>查看第二个页面</router-link>
    <ul class="ul_list">
      <li v-for="item in list">
        <p class="name">商品:{{item.name}}</p>
        <p class="price">价格:¥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
      // 直接作为data()中属性值使用
      list: this.$store.state.goodsList,
    }
   },
   mounted() {
    //  通过钩子函数使用
    //  this.list = this.$store.state.goodsList
   },
  //  计算属性
   computed: {
    list() { // 获取store中的数据
      return this.$store.state.goodsList;
    }
   },
  }
</script>

组件仍然保有局部状态

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

效果

Vuex中的State使用介绍

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
瀑布流布局代码一例
Apr 11 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JSONObject使用方法详解
Dec 17 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
为什么要使用Vuex的介绍
Jan 19 #Javascript
Vue核心概念Getter的使用方法
Jan 18 #Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 #Javascript
JavaScript数据结构之栈实例用法
Jan 18 #Javascript
Vue核心概念Action的总结
Jan 18 #Javascript
js取小数点后两位四种方法
Jan 18 #Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
You might like
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
js显示当前日期时间和星期几
2015/10/22 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python3数字求和的实例
2019/02/19 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Python 如何提高元组的可读性
2019/08/26 Python
Python数据存储之 h5py详解
2019/12/26 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
C语言编程练习
2012/04/02 面试题
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
租房协议书范本
2014/04/09 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
家长对老师的评语
2014/04/18 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
项目备案申请报告
2015/05/15 职场文书
总结会主持词
2015/07/02 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电