Vuex10分钟入门

idisfkj 发布于2019-08-23 15:38 / 2416人阅读

摘要：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。写需要的组件创建一个组件，怼下面的内容，你喜欢彬哥哪一点创建一个展示组件我喜欢彬哥打开，删掉没用的东西，直接怼下面的代码，到这里，架子就搭好了。

通过本文你将：

1.知道什么是Vuex.

2.知道为什么要用Vuex.

3.能跑一个Vuex的例子。

4.了解相关概念，面试的时候能说出一个所以然

5.项目中用Vuex知道该学什么东西。

好，走起。

1.什么是VueX?

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

翻译成人话，Vuex是vuejs的官方管理数据状态的库。

官网：https://vuex.vuejs.org/zh/

2.为什么用它？

举个例子，

你用vue开发一个app，

不同的组件，你都需要用户信息，还有一些公用的数据，你每一个组件请求一遍浪费性能，你不请求组件间属性和参数传来传去，你自己维护很墨迹，麻烦也容易出错。好吧，你觉得干不好或者麻烦，那么vueX帮你解决这个事儿。

这个没什么复杂的，大学图书馆，自助借还书，每次都把书乱放，维护很麻烦，怎么办，都还给图书馆管理员，图书馆管理员统一管理调配。ok，图书管理员就是VueX.

3.怎么用？

1.安装

npm install vuex --save

2.初始化store.js，

（vue-cli安装项目目录不墨迹），

一般放到src/store/store.js下面，初始化代码,相当于搞了一个图书管理员。

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export const store = new Vuex.Store({})

3.写需要的组件

创建一个Form.vue组件，怼下面的内容，

创建一个展示组件Display.vue

打开App.vue，删掉没用的东西，直接怼下面的代码，

到这里，架子就搭好了。

4.增加各种需要的东西，

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    love: ""
  },
  mutations: {
    change(state, love) {
      state.love = love
    }
  },
  getters: {
    love: state => state.love
  }
})

这里注意，你不用去管

这些破概念，你就照猫画虎，我写啥你抄啥，抄几遍，你就知道数据流向了。你不知道鼠标叫mouse，也不影响你玩电脑。

love就是你喜欢我的东西，相当于一个变量，被传来传去的一会。

好了，就这么简单可以用了。

4.使用VueX

打开main.js，导入，然后用。

import { store } from "./store/store"

new Vue({
  el: "#app",
  store,
  components: { App },
  template: ""
})

到这里就相当于图书管理员上岗等着学生来还书了,来啊，互相伤害啊！

5.我来了……

既然搞数据，躲不开刚才我们的搞的表单组件，打开Form.vue

打开，Display.vue

漂亮，如果你运行成功，你就会发现，页面里面出现，我喜欢彬哥：离我远一点。

告辞！

云服务器 GPU云服务器三分钟入门微信发10分钟以上视频微信怎么发10分钟视频 10分钟了解Jmeter性能测试工具

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

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

【Copy攻城狮日志】CML之5分钟入门多端统一框架

摘要：开局一张图，故事全靠编是啥变色龙又是啥自从有小程序以来，小程序的第三方框架便孕育而生，从原始时代的只基于微信小程序多如今多端统一开发框架，可以说前端技术从年到年又发生了天翻地覆的变化。 Created 2019-4-6 21:57:17 by huqi Updated 2019-4-7 22:54:55 by huqi showImg(https://segmentfault.c...

MycLambert 2019-08-23 16:47 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
vuex入门案例

摘要：说到老四了，最苦逼的家伙了，活都让他干了，活总得干完一个说一个吧，所以他基本上同步进行的。前言这次发表的项目，这对我来说是一场革命。记录着第一次GitHub发布项目，记录着最初学习vuex的头昏脑胀，也记录着怀揣对react的一腔热血后却步履阑珊后，再次回看vue时那种感觉。所以说这个项目对我很有意思，麻雀虽小，五脏俱全。在写这个项目之前，我正在试水react，那种函数式编程+j...

roundstones 2019-08-23 11:36 评论0 收藏0