Vuex与组件通信

时间: 2019-08-21阅读: 555标签: vuex

概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。也就是说 Vuex 用于单页面应用组件之间的数据共享,在组件嵌套很多层的情况下,Vue 中父子组件的通信过程就变得很麻烦,此时使用 Vuex 方便了组件间的通信。vuex官网上说是一个vue的状态管理工具。其实我们可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关系复杂一点的时候,就把其中的变量抽离出来管理。Vuex提供了一个数据仓库,存放着各种数据data。谁要用谁去请求num的值,谁想改就改该多好是吧,vuex就是干这个的,有点全局变量的意思。任何组件需要拿,改东西,都可以找他。

Vuex主要涉及到state,getters,mutations,actions。

state :是驱动应用的数据源,是惟一的数据载体,跟仓库一样。
mutations :更改state的唯一方法,意思是修改、增加等处理state的方法,
getters :从state中派生出的一些状态,如获取数据的数组的长度,方便其他组件获取使用。简单来说,就是过滤,计算,组合!
actions :用来提交mutations,通过commit再去触发对应的mutations,而不是直接变更state状态。

稍微简单点的vuex管理就使用 state 和 mutations 这两个就行。复杂的vuex管理还会涉及到modules等辅助方法。


应用实例:Todo-list

本文旨在通过一个简单的todo list例子,熟悉vuex常见的方法,了解组件间数据共享机制。

本文示例中,分为父组件Main.vue,两个子组件List.vue和Add.vue,父组件包含两个子组件,实时显示列表长度,子组件Add.vue负责添加列表项,List.vue负责显示列表,以及删除列表项。在子组件添加和删除列表项时,相应的组件会联动:父组件会实时计算列表长度,List组件会增减列表项。大家可以先观看效果:Demo。


1. 准备

本实例采用 Vue2 + Vue Router + Vuex + vue-ydui 实现。 我们事先已经建立了Vue webpack模板,并安装相关组件。

npm install --save vuex
npm install --save vue-router
npm install --save vue-ydui


2. 建立数据仓库

在src目录下建立文件夹store/,并在store/目录下新建index.js文件。

import Vue from 'vue'
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        message: '',
        todoList: [{id: 0, value: 'default'}]
    },
    getters: {
        //计算list长度
        listCount(state) {
            return state.todoList.length;
        }
    },
    mutations: {
        //新增
        addTodo(state, item) {
            state.todoList.push(item);
        },
        //删除
        delTodo(state, index) {
            state.todoList.splice(index, 1);
        },
        //设置错误提示信息
        showError(state, msg) {
            state.message = msg;
        }
    },
    actions: {
        //提交addTodo
        addTodo(context, item) {
            if (item.value == '') {
                context.commit('showError', '请输入内容');
            } else {
                context.commit('addTodo', item);
                context.commit('showError', '');
            }
        },
        //提交delTodo
        delTodo({commit}, index) {
            commit('delTodo', index);
        }
    },
    modules: {}
});

export default store;

如上代码和注释,我们在store/index.js中设置了数据以及修改这些数据的方法。


3. main.js

在main.js中将store.js加进来。示例中我们还用到了UI库:vue-ydui,也一起加进来。

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

import YDUI from 'vue-ydui';
import 'vue-ydui/dist/ydui.rem.css';

Vue.use(YDUI);

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '
<app />'
})


4. 设置路由

在router/index.js加入路由设置,让页面直接访问父组件Main.vue。

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main
    }
  ]
})


5. Main.vue

现在我们来看父组件:

<template>
  <yd-layout>
    <p>这是一个Todo-List示例</p>
    <hw-add></hw-add>
    <hw-list></hw-list>
    <p>todoList 总数:{{listCount}}</p>
    <p>{{msg}}</p>
  </yd-layout>
</template>

<script>
import hwAdd from "./Add.vue";
import hwList from "./List.vue";

export default {
  components: {
    hwAdd,
    hwList
  },
  data(){
    return {
      
    }
  },
  computed: {
    listCount() {
      return this.$store.getters.listCount;
    },
    msg() {
      let message = this.$store.state.message;
      if (message !== '') {
        this.$dialog.toast({
            mes: message,
            timeout: 1500
        });
      }
    }
  }
}
</script>

Main.vue用来展示列表和添加列表项等子组件,已经显示列表长度和错误信息提示。我们看到在 computed 中获取到数据仓库中的数据,并显示在页面上。


6. Add.vue

Add.vue用来添加列表项。

<template>
    <yd-layout>
        <yd-cell-group>
            <yd-cell-item>
                <yd-icon slot="icon" name="discount" size=".35rem"></yd-icon>
                <input type="text" slot="right" placeholder="请输入内容" v-model="value" @keyup.enter="addItem">
                <yd-button slot="right" type="warning" @click.native="addItem">新增</yd-button>
            </yd-cell-item>
        </yd-cell-group>

    </yd-layout>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            id: 0
        }
    },
    methods: {
        addItem() {
            let item = {
                value: this.value,
                id: ++this.id
            }
            this.value = '';
            this.$store.dispatch('addTodo', item);
        }
    }
}
</script>

在添加列表项的addItem方法中,我们使用 this.$store.dispatch('addTodo', item); 告诉vuex的 addTodo ,我们要往todo list中添加新的列表项。


7. List.vue

List.vue用来展示列表项,并且提供删除列表项功能。

<template>
    <yd-layout>
        <yd-cell-group title="Todo列表">
            <yd-cell-item v-for="(item,index) in todoList" :key="index" class="list">
                <span slot="left">{{index+1}}.{{item.value}}</span>
                <span slot="right">
                    <yd-icon slot="icon" name="delete" size=".36rem" @click.native="del(index)"></yd-icon>
                </span>
            </yd-cell-item>
        </yd-cell-group>
    </yd-layout>
</template>

<script>
import {mapState} from 'vuex';

export default {
    data() {
        return {
            
        }
    },
    computed: {
        ...mapState([
            'todoList'
        ])
    },
    methods: {
        del(index) {
            this.$store.dispatch('delTodo', index);
        }
    }
}
</script>

上述代码中的

computed: {
        ...mapState([
            'todoList'
        ])
    },

其实相当于:

computed: {
        todoList() {
             return this.$store.state.todoList;
        }
},


小结

通过示例我们可以知道,使用Vuex来管理数据共享,各组件无需关注组件间的数据通信传输,一切数据的读取和更新都是各组件与Vuex数据仓库间的操作,避免了复杂项目中数据管理混乱的情况发生。

Vuex的使用还有很多优化的写法,比如 mapState、mapGetters、mapActions ,本站后面会有文章讲解。当然,如果是小型的项目,我们直接用$emit, props等就能解决组件间的数据通信问题,不必使用vuex这个伤脑筋的工具。

注意:Vuex 是将数据存储在了内存中,每一次刷新页面,之前存在 Vuex 中的数据就会重新初始化。

原文 https://www.helloweba.net/javascript/615.html


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5432

Vuex的数据重新加载页面后消失

一般我们在登录成功的时候需要把用户信息,菜单信息放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例

vuex的持久化

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应 用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.

结合 Vue.observable 写一个简易 Vuex

作为 Vue 全家桶的一员,Vuex 的重要性不言而喻,不管是用来管理状态,还是封装 Controler 都很好用。不过在一些体量较小的项目中,为了几个简单的状态或者处理函数而引入 Vuex,就像是高射炮打蚊子,大材小用了

页面刷新时vuex数据持久化问题的解决方案

vuex是在中大型项目中必不可少的状态管理组件,刷新会重新更新状态,但是有时候我们并不希望如此。例如全局相关的,如登录状态、token、以及一些不常更新的状态等,我们更希望能够固化到本地,减少无用的接口访问,以及更佳的用户体验。

vue中 Vuex

由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态

如何简化你的Vuex Store

随着Vue应用程序的大小增加,Vuex Store中的actions和mutations也会增加。本文,我们将介绍如何将其减少到易于管理的东西。Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储

Vuex新手的理解与使用

开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入

Vuex状态管理,state、getter

首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。一种是state里的数据全部是通过请求来触发action或mutation来改变

Vuex 的异步数据更新

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数 mutation 是同步执行,不是异步执行。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广