超简单入门Vuex小示例

linkin 发布于2019-08-22 13:52 / 2026人阅读

摘要：写在前面本文旨在通过一个简单的例子，练习的几个常用方法，使初学者以最快的速度跑起来一个的示例。生成基于的项目基于脚手架生成一个项目常用命令项目名进入项目目录，使用先试着跑一下。子组件可以修改父组件和自己的数据。

写在前面

本文旨在通过一个简单的例子，练习vuex的几个常用方法，使初学者以最快的速度跑起来一个vue + vuex的示例。

学习vuex需要你知道vue的一些基础知识和用法。相信点开本文的同学都具备这个基础。

另外对vuex已经比较熟悉的大佬可以忽略本文。

生成基于vue的项目

基于vue-cli脚手架生成一个vue项目
常用npm命令：

npm i vue-vli -g
vue --version
vue init webpack 项目名

进入项目目录，使用npm run dev先试着跑一下。

一般不会出现问题，试跑成功后，就可以写我们的vuex程序了。

使用vue完成的示例

使用vuex首先得安装vuex，命令：

npm i vuex --save

介绍一下我们的超简单Demo，一个父组件，一个子组件，父组件有一个数据，子组件有一个数据，想要将这两个数据都放置到vuex的state中，然后父组件可以修改自己的和子组件的数据。子组件可以修改父组件和自己的数据。

先放效果图，初始化效果如下：

如果想通过父组件触发子组件的数据，就点“改变子组件文本”按钮，点击后效果如下：

如果想通过子组件修改父组件的数据，就在子组件点击“修改父组件文本”按钮，点击后效果如下：

代码文件介绍

首先是Parent.vue组件

下面是Child.vue子组件

最后是vuex的配置文件

import Vue from "vue"
import Vuex from "vuex";

Vue.use(Vuex)

const state = {
    testMsg: "原始文本",
    childText:"子组件原始文本"
}

const mutations = {
    changeTestMsg(state, str){
        state.testMsg = str;
    },
    changeChildText(state, str){
        state.childText = str;
    }

}

const store = new Vuex.Store({
    state: state,
    mutations: mutations
})

export default store;

后记

通过该vuex示例，了解vuex的常用配置及方法调用。希望对不怎么熟悉vuex的同学快速上手vuex项目有点帮助。

因为没太多东西，我自己也是刚接触，本例就不往GitHub扔了，如果尝试了本例，但是没有跑起来的同学，可以一起交流下。

GPU云服务器云服务器 webrtc 简单示例最简单的webrtc示例 html5简单示例 linux小程序示例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92558.html

vuex其实超简单,只需3步

摘要：每一条被记录，都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中中的异步函数中的回调让这不可能完成因为当触发的时候，回调函数还没有被调用，不知道什么时候回调函数实际上被调用实质上任何在回调函数中进行的状态的改变都是不可追踪的。前言之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用了 v...

binta 2019-08-02 11:53 评论0 收藏0
vuex其实超简单,只需3步

摘要：每一条被记录，都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中中的异步函数中的回调让这不可能完成因为当触发的时候，回调函数还没有被调用，不知道什么时候回调函数实际上被调用实质上任何在回调函数中进行的状态的改变都是不可追踪的。前言之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用了 v...

summerpxy 2019-08-23 12:38 评论0 收藏0
vuex其实超简单,只需3步

摘要：前言之前几个项目中都多多少少碰到一些组件之间需要通信的地方而因为种种原因的成本反而比还高所以技术选型上选用了但是不知道为什么团队里的一些新人一听到就开始退缩了因为很难真的很难吗今天我们用简单的步来证明一下有多简单纯属个人经验难免有不正确的地前言之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用...

zhichangterry 2019-08-22 17:20 评论0 收藏0
vuex其实超简单,喝完这3步,还有3步

摘要：每一条被记录，都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中中的异步函数中的回调让这不可能完成因为当触发的时候，回调函数还没有被调用，不知道什么时候回调函数实际上被调用实质上任何在回调函数中进行的状态的改变都是不可追踪的。上一篇 vuex其实超简单,只需3步简单介绍了vuex的3步入门,不过为了初学者容易消化,我削减了很多内容,这一节,就是把少掉的内容补上,如果你没看过上...

kumfo 2019-08-22 17:23 评论0 收藏0