[js高手之路]Vue2.0基於vue-cli+webpack Vuex用法詳解
元件通訊的本質其實就是在元件之間傳遞資料或元件的狀態(這裡將資料和狀態統稱為狀態),但可以看到如果我們通過最基本的方式來進行通訊,一旦需要管理的狀態多了,程式碼就會變得十分臃腫和龐大。對所有狀態的管理便會顯得力不從心,因此,vuex出現了,他就是幫助我們把公用的狀態全抽出來放在vuex的容器中,然後根據一定的規則來進行管理,我們趕緊來用一下吧,想要掌握vuex的用法,你應該要掌握元件之間的通訊,如果不瞭解,請參考以下這兩篇文章:
搭建環境開始:
在git命令列下,執行以下命令完成環境的搭建:
1,npm install --global vue-cli 安裝vue命令列工具
2,vue init webpack vue-demo 使用vue命令生成一個webpack專案,專案名稱為vue-demo
3,cd vue-demo 切入專案
4,npm install安裝package.json中的所有依賴包
5,npm run dev執行專案
然後刪除預設的Hello.vue元件,把App.vue整理成以下樣子
1 <template> 2 <div id="app"> 3 這是一個空的app 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name : 'app' 10 } 11 </script>
把router下面index.js檔案修改如下:
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 4 Vue.use(Router) 5 6 export default new Router({ 7 routes: [ 8 { 9 path: '/', 10 } 11 ] 12 })
基本環境搭建完畢之後,開始安裝vuex了
安裝命令:npm install vuex --save-dev
一、安裝完成之後,在main.js中引入,並註冊store:這樣我們就能通過this.$store來獲得這個容器了
main.js程式碼:
1 import Vue from 'vue' 2 import App from './App' 3 import router from './router' 4 import Vuex from 'vuex' 5 import store from './vuex/store' 6 7 Vue.use(Vuex) 8 9 Vue.config.productionTip = false 10 11 /* eslint-disable no-new */ 12 new Vue({ 13 el: '#app', 14 router, 15 store, 16 template: '<App/>', 17 components: { App } 18 })
二、在src目錄下建立vuex目錄,然後在vuex目錄下建立store.js,用於存放所有的狀態(改變的資料)
store.js程式碼:
1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 4 Vue.use(Vuex) 5 6 const store = new Vuex.Store({ 7 state: { 8 userName : 'ghostwu' 9 } 10 }) 11 12 export default store
在state儲存了一個狀態userName
三、將狀態中的資料渲染到元件中
在components下面新建一個元件Main.vue,程式碼如下:
1 <template> 2 <div> 3 <h3>{{myName}}</h3> 4 </div> 5 </template> 6 <script> 7 export default { 8 name : "Main", 9 computed : { 10 myName (){ 11 return this.$store.state.userName; 12 } 13 } 14 } 15 </script>
通過一個計算屬性獲取到儲存在全域性容器store中state儲存的狀態值
四,在App.vue中引入元件Main.vue
App.vue程式碼:
<template> <div id="app"> <Mainc></Mainc> </div> </template> <script> import Mainc from './components/Main.vue'; export default { name: 'app', components : { Mainc } } </script>
這個時候,就能看見在頁面上把store容器中 state的userName的值讀取出來了, 如果修改userName的值,頁面上也會發生變化
五、,我們通過一些互動來改變狀態,看下元件是否能收到state的值
在components元件下新建一個Header.vue元件,程式碼如下:
1 <template> 2 <div> 3 <input type="text" v-model="msg" /> 4 <input type="button" v-on:click="setName" value="點我" /> 5 </div> 6 </template> 7 <script> 8 export default { 9 name : 'Header', 10 data(){ 11 return { 12 msg : '' 13 } 14 }, 15 methods : { 16 setName(){ 17 this.$store.state.userName = this.msg; 18 } 19 } 20 } 21 </script>
App.vue引入元件Header
App.vue程式碼如下:
1 <template> 2 <div id="app"> 3 <Headerc></Headerc> 4 <Mainc></Mainc> 5 </div> 6 </template> 7 8 <script> 9 import Headerc from './components/Header.vue'; 10 import Mainc from './components/Main.vue'; 11 export default { 12 name: 'app', 13 components : { 14 Headerc, 15 Mainc 16 } 17 } 18 </script>
當我點選按鈕的時候,改變state中useName的值,Main元件中的state.userName的值也會跟著更新,這種改變方式很好理解,接下來我們看下vuex推薦的狀態改變方式
六、vuex推薦的狀態改變方法
在store.js中新建一個mutations,存放被修改的狀態
1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 4 Vue.use(Vuex) 5 6 const store = new Vuex.Store({ 7 state: { 8 userName : 'ghostwu' 9 }, 10 mutations : { 11 showUserName( state, msg ){ 12 state.userName = msg; 13 } 14 } 15 }) 16 17 export default store
其中第一個引數 state 就是 $store.state,第二個引數 msg 需要另外傳入,這個引數我們通過Header.vue的點選事件中的方法來傳遞
Header.vue程式碼:
1 <template> 2 <div> 3 <input type="text" v-model="msg" /> 4 <input type="button" v-on:click="setName" value="點我" /> 5 </div> 6 </template> 7 <script> 8 export default { 9 name : 'Header', 10 data(){ 11 return { 12 msg : '' 13 } 14 }, 15 methods : { 16 setName(){ 17 this.$store.commit( 'showUserName', this.msg ); 18 } 19 } 20 } 21 </script>
$store.commit 把this.msg的值提交給showUserName。state就收到了改變的狀態了,這就是一個vuex最基本的用法和作用
相關推薦
[js高手之路]Vue2.0基於vue-cli+webpack Vuex用法詳解
元件通訊的本質其實就是在元件之間傳遞資料或元件的狀態(這裡將資料和狀態統稱為狀態),但可以看到如果我們通過最基本的方式來進行通訊,一旦需要管理的狀態多了,程式碼就會變得十分臃腫和龐大。對所有狀態的管理便會顯得力不從心,因此,vuex出現了,他就是幫助我們把公用的狀態全抽出來放在vuex的容器中,然後根據一
[js高手之路]Vue2.0基於vue-cli+webpack父子元件通訊教程
在git命令列下,執行以下命令完成環境的搭建: 1,npm install --global vue-cli 安裝vue命令列工具 2,vue init webpack vue-demo 使用vue命令生成一個webpack專案,專案名稱為vue-demo 3,c
[js高手之路]Vue2.0基於vue-cli+webpack同級元件之間的通訊教程
我們接著上文繼續,本文我們講解兄弟元件的通訊,專案結構還是跟上文一樣. 在src/assets目錄下建立檔案EventHandler.js,該檔案的作用在於給同級元件之間傳遞事件 EventHandler.js程式碼: 1 import Vue from 'Vue'; 2 export defau
vue2.0基於vue-cli,element-ui餓了麼vue前端開源專案製作vue的樹形table,treeTable
<template> <el-table :data="data" border style="width: 100%" :row-style="showTr"> <el-table-column v-for="(column, ind
[js高手之路]var, let, const詳解
兩種 控制 ghost 花括號 pre 內部 span lec 同名 1 function show( flag ){ 2 console.log( a ); 3 if( flag ){ 4
[js高手之路] dom常用節點屬性兼容性詳解與應用
asc 子元素 種類型 process 變色 tex 如果 結構 節點和 一、每個DOM節點都有一個nodeType屬性,表示節點類型, NodeType一共有12種類型,我們可以通過遍歷內置的Node構造函數獲取 1 window.onload =
[js高手之路]一步步圖解javascript的原型(prototype)對象,原型鏈
create 原型對象 str 對象賦值 div blank type屬性 查找 __proto__ 我們接著上文繼續,我們通過原型方式,解決了多個實例的方法共享問題,接下來,我們就來搞清楚原型(prototype),原型鏈的來龍去脈. 1 functio
[js高手之路]原型對象(prototype)與原型鏈相關屬性與方法詳解
隱式 之前 username tar uname create pro getproto .get 一,instanceof: instanceof檢測左側的__proto__原型鏈上,是否存在右側的prototype原型. 我在之前的兩篇文章 [js高手之路]構造函數的基
[js高手之路]使用原型對象(prototype)需要註意的地方
spa ray show 特性 之路 對象 重復 new i++ 我們先來一個簡單的構造函數+原型對象的小程序 1 function CreateObj( uName, uAge ) { 2 this.userName = uN
[js高手之路]設計模式系列課程-單例模式實現模態框
ges 點擊 eat abs select nbsp str osi 控制 什麽是單例呢? 單,就是一個的意思。例:就是實例化出來的對象,那合在一起就是保證一個構造函數只能new出一個實例,為什麽要學習單例模式呢?或者說單例模式有哪些常見的應用場景.它的使用還是很廣泛,比如
[js高手之路] 我的開源javascript框架gdom - 選擇器用法
htm query bsp https title 是我 pad logs ext gdom框架是我開發的一款dom和字符串處理框架,目前版本是1.0.0. 使用方法跟jquery是差不多的, 會用jquery就會用gdom,目前 1.0.0版本的選擇器完全支持CSS3選擇
[js高手之路]設計模式系列課程-委托模式實戰微博發布功能
i++ 發布 動態 use shee 內容 標題 cnblogs 文件 在實際開發中,經常需要為Dom元素綁定事件,如果頁面上有4個li元素,點擊對應的li,彈出對應的li內容,怎麽做呢?是不是很簡單? 大多數人的做法都是:獲取元素,綁定事件 1 <ul&
[js高手之路]設計模式系列課程-發布者,訂閱者重構購物車
購物車 代碼重構 發布者訂閱者模式,是一種很常見的模式,比如:一、買賣房子生活中的買房,賣房,中介就構成了一個發布訂閱者模式,買房的人,一般需要的是房源,價格,使用面積等信息,他充當了訂閱者的角色中介拿到賣主的房源信息,根據手頭上掌握的客戶聯系信息(買房的人的手機號),通知買房的人,他充當了發布者的角
[js高手之路]面向對象+設計模式+繼承一步步改造簡單的四則運算
繼承 設計模式 到目前為止,我已經寫完了面向對象完整的一個系列知識,前面基本屬於理論,原理的理解,接下來,我們就用學到的知識來實戰下吧.看看理解原理和理論是否重要?例子從簡單到復雜一、單體(字面量)封裝加減乘除var Oper = { add : function( n1, n
[js高手之路]原型式繼承與寄生式繼承
原型式繼承 寄生式繼承 一、原型式繼承本質其實就是個淺拷貝,以一個對象為模板復制出新的對象function object( o ){ var G = function(){}; G.prototype = o; return ne
[js高手之路]node js系列課程-創建簡易web服務器與文件讀寫
server 分享 回調 能夠 logs 瀏覽器中 文件 讀取 對象 web服務器至少有以下幾個特點: 1、24小時不停止的工作,也就是說這個進程要常駐在內存中 2、24小時在某一端口監聽,如: http://localhost:8080, www服務器默認端口80 3、要
[js高手之路]javascript騰訊面試題學習封裝一個簡易的異步隊列
騰訊 selector host .proto 算法 obj 代碼 ner 試題 這道js的面試題,是這樣的,頁面上有一個按鈕,一個ul,點擊按鈕的時候,每隔1秒鐘向ul的後面追加一個li, 一共追加10個,li的內容從0開始技術( 0, 1, 2, ....9 ),首先我
[js高手之路]深入淺出webpack系列1-安裝與基本打包用法和命令參數
查看 2-2 gre colors 令行 一起 切換 json round webpack,我想大家應該都知道或者聽過,Webpack是前端一個工具,可以讓各個模塊進行加載,預處理,再進行打包。現代的前端開發很多環境都依賴webpack構建,比如vue官方就推薦使用webp
[js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解
基本用法 tle webpack 函數 ges 配置 ref 高手之路 pack 接著上文,重新在webpack文件夾下面新建一個項目文件夾demo2,然後用npm init --yes初始化項目的package.json配置文件,然後安裝webpack( npm inst
[js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下)
json 學習 所在 npm chunk target get lan cnblogs 本文繼續接著上文,繼續寫下webpack.config.js的其他配置用法. 一、把兩個文件打包成一個,entry怎麽配置? 在上文中的webpack.dev.config.js中,用數