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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
JS实现li标签的删除
Apr 12 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
为什么要使用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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
农历与西历对照
2006/09/06 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python中global与nonlocal比较
2014/11/21 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python之reload流程实例代码解析
2018/01/29 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
先进工作者获奖感言
2014/02/08 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
班组建设经验交流材料
2014/05/12 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python