vue學習---vuex之簡介
每一個 Vuex 應用的核心就是 store(倉庫)。"store" 基本上就是一個容器,它包含著你的應用中大部分的狀態(state)。Vuex 和單純的全局對象有以下兩點不同:
-
Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麽相應的組件也會相應地得到高效更新。
-
你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交(commit) mutations。
下面就實現一個計數功能簡介這兩句話:
1.安裝vue
我采用的是cmd安裝方式,在你想要建立的工程下,全局安裝vue
例如:F:vueDemo文件夾 cmd F: 回車進入 vueDemo文件夾 輸入下面代碼安裝vue
npm install vue-cli -g
測試是否安裝成功 vue -V 成功會顯示版本號(這裏是2.X的版本)
2. vue init webpack vuexDemo vuexDemo是工程名
3.cd vuexDemo 進入工程
4.cnpm install 鏡像安裝 等待安裝所有依賴的包
5.npm run dev 會自動選擇瀏覽器,運行在本地8080 端口上,會看到頁面
6.Ctrl + c 可結束運行 因為此時沒有安裝vuex,結束運行,安裝vuex
7.cnpm install vuex 成功後,直接第五步即可.
8.建立的工程目錄如下:在src下新建一個store.js文件用於狀態管理
9.在store.js 文件中,引入vue vuex ,其代碼如下:
import Vue from ‘vue‘ import Vuex from ‘vuex‘ //使用vuex模塊 Vue.use(Vuex); //聲明靜態常量為4 要是訪問它,稱為 訪問狀態對象 const state = { count : 4 };//定義一個方法,在vue中,唯一的定義狀態的方法就是提交一個mutations, //而且導出時,只要導出mutations即可, //當使用時,也僅僅只要使用統一的 $store.commit(‘event‘) event是事件名稱。
//要是訪問它 ,稱為觸發狀態 const mutations = { add(state){ state.count ++; }, sub(state){ state.count--; } }; //導出一個模塊 export default new Vuex.Store({ state, mutations })
10.在main.js 中引入 store.js
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ //引入倉庫文件 import store from ‘./store.js‘ /* eslint-disable no-new */ new Vue({ el: ‘#app‘, store, render:xx=>xx(App) //直接綁定一個節點進行渲染一個組件,將App.vue這個組件直接渲染進in dex.html下id="app"的節點下 })
11.在App.vue文件中,測試狀態
<template> <div id="app"> <div id="appaaa"> <h1>這是vuex的示例</h1> <p>調用常量 {{$store.state.count}}</p> <p> <button @click = "$store.commit(‘add‘)">加</button> <button @click = "$store.commit(‘sub‘)">減</button> </p> </div> </div> </template>
12,頁面顯示效果
vue學習---vuex之簡介