Vuex10分鐘入門

idisfkj 發(fā)布于2019-08-23 15:38 / 2434人閱讀

摘要：它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。寫需要的組件創(chuàng)建一個組件，懟下面的內(nèi)容，你喜歡彬哥哪一點創(chuàng)建一個展示組件我喜歡彬哥打開，刪掉沒用的東西，直接懟下面的代碼，到這里，架子就搭好了。

通過本文你將：

1.知道什么是Vuex.

2.知道為什么要用Vuex.

3.能跑一個Vuex的例子。

4.了解相關概念，面試的時候能說出一個所以然

5.項目中用Vuex知道該學什么東西。

好，走起。

1.什么是VueX?

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。

翻譯成人話，Vuex是vuejs的官方管理數(shù)據(jù)狀態(tài)的庫。

官網(wǎng)：https://vuex.vuejs.org/zh/

2.為什么用它？

舉個例子，

你用vue開發(fā)一個app，

不同的組件，你都需要用戶信息，還有一些公用的數(shù)據(jù)，你每一個組件請求一遍浪費性能，你不請求組件間屬性和參數(shù)傳來傳去，你自己維護很墨跡，麻煩也容易出錯。好吧，你覺得干不好或者麻煩，那么vueX幫你解決這個事兒。

這個沒什么復雜的，大學圖書館，自助借還書，每次都把書亂放，維護很麻煩，怎么辦，都還給圖書館管理員，圖書館管理員統(tǒng)一管理調(diào)配。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.寫需要的組件

創(chuàng)建一個Form.vue組件，懟下面的內(nèi)容，

創(chuàng)建一個展示組件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
  }
})

這里注意，你不用去管

這些破概念，你就照貓畫虎，我寫啥你抄啥，抄幾遍，你就知道數(shù)據(jù)流向了。你不知道鼠標叫mouse，也不影響你玩電腦。

love就是你喜歡我的東西，相當于一個變量，被傳來傳去的一會。

好了，就這么簡單可以用了。

4.使用VueX

打開main.js，導入，然后用。

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

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

到這里就相當于圖書管理員上崗等著學生來還書了,來啊，互相傷害啊！

5.我來了……

既然搞數(shù)據(jù)，躲不開剛才我們的搞的表單組件，打開Form.vue

打開，Display.vue

漂亮，如果你運行成功，你就會發(fā)現(xiàn)，頁面里面出現(xiàn)，我喜歡彬哥：離我遠一點。

告辭！

GPU云服務器云服務器三分鐘入門微信發(fā)10分鐘以上視頻微信怎么發(fā)10分鐘視頻 10分鐘了解Jmeter性能測試工具

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102369.html

【Copy攻城獅日志】CML之5分鐘入門多端統(tǒng)一框架

摘要：開局一張圖，故事全靠編是啥變色龍又是啥自從有小程序以來，小程序的第三方框架便孕育而生，從原始時代的只基于微信小程序多如今多端統(tǒng)一開發(fā)框架，可以說前端技術從年到年又發(fā)生了天翻地覆的變化。 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入門案例

摘要：說到老四了，最苦逼的家伙了，活都讓他干了，活總得干完一個說一個吧，所以他基本上同步進行的。前言這次發(fā)表的項目，這對我來說是一場革命。記錄著第一次GitHub發(fā)布項目，記錄著最初學習vuex的頭昏腦脹，也記錄著懷揣對react的一腔熱血后卻步履闌珊后，再次回看vue時那種感覺。所以說這個項目對我很有意思，麻雀雖小，五臟俱全。在寫這個項目之前，我正在試水react，那種函數(shù)式編程+j...

roundstones 2019-08-23 11:36 評論0 收藏0