vueX10分鐘入門
通過本文你將:
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元件,懟下面的內容,
<template> <div> <label for="dabinge666">你喜歡彬哥哪一點</label> <input name="dabinge666"> </div> </template>
建立一個展示元件Display.vue
<template> <div> <p>我喜歡彬哥:</p> </div> </template>
開啟App.vue,刪掉沒用的東西,直接懟下面的程式碼,
<template> <div id="app"> <Form/> <Display/> </div> </template> <script> import Form from './components/Form' import Display from './components/Display' export default { name: 'App', components: { Form, Display } } </script>
到這裡,架子就搭好了。
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: '<App/>' })
到這裡就相當於圖書管理員上崗等著學生來還書了,來啊,互相傷害啊!
5.我來了……
既然搞資料,躲不開剛才我們的搞的表單元件,開啟Form.vue
<template> <div> <label for="dabinge666">你喜歡彬哥哪一點?</label> //輸入:離我遠一點 <input @input="changed" name="dabinge666"> </div> </template> <script> export default { methods: { changed: function(event) { //大聲喊出你的對彬哥的愛,讓整個圖書館都聽到 this.$store.commit('change', event.target.value) } } } </script>
開啟,Display.vue
<template> <div> <p>我喜歡彬哥: {{ $store.getters.love }}</p> </div> </template>
漂亮,如果你執行成功,你就會發現,頁面裡面出現,我喜歡彬哥:離我遠一點。
告辭!