Vue2.0基于vue-cli+webpack Vuex的用法(實例講解)
在這之前,我已經(jīng)分享過組件與組件的通信機(jī)制以及父子組件之間的通信機(jī)制,而我們的vuex就是為了解決組件通信問題的
vuex是什么東東呢?
組件通信的本質(zhì)其實就是在組件之間傳遞數(shù)據(jù)或組件的狀態(tài)(這里將數(shù)據(jù)和狀態(tài)統(tǒng)稱為狀態(tài)),但可以看到如果我們通過最基本的方式來進(jìn)行通信,一旦需要管理的狀態(tài)多了,代碼就會變得十分臃腫和龐大。對所有狀態(tài)的管理便會顯得力不從心,因此,vuex出現(xiàn)了,他就是幫助我們把公用的狀態(tài)全抽出來放在vuex的容器中,然后根據(jù)一定的規(guī)則來進(jìn)行管理,我們趕緊來用一下吧,想要掌握vuex的用法,你應(yīng)該要掌握組件之間的通信,如果不了解,請參考以下這兩篇文章:
Vue2.0基于vue-cli+webpack父子組件通信教程(實例講解)
Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦)
搭建環(huán)境開始:
在git命令行下,執(zhí)行以下命令完成環(huán)境的搭建:
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運(yùn)行項目
然后刪除默認(rèn)的Hello.vue組件,把App.vue整理成以下樣子
<template> <div id="app"> 這是一個空的app </div> </template> <script> export default { name : 'app' } </script>
把router下面index.js文件修改如下:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', } ] })
基本環(huán)境搭建完畢之后,開始安裝vuex了
安裝命令:npm install vuex --save-dev
一、安裝完成之后,在main.js中引入,并注冊store:這樣我們就能通過this.$store來獲得這個容器了
main.js代碼:
import Vue from 'vue' import App from './App' import router from './router' import Vuex from 'vuex' import store from './vuex/store' Vue.use(Vuex) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
二、在src目錄下創(chuàng)建vuex目錄,然后在vuex目錄下創(chuàng)建store.js,用于存放所有的狀態(tài)(改變的數(shù)據(jù))
store.js代碼:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { userName : 'ghostwu' } }) export default store
在state存儲了一個狀態(tài)userName
三、將狀態(tài)中的數(shù)據(jù)渲染到組件中
在components下面新建一個組件Main.vue,代碼如下:
<template> <div> <h3>{{myName}}</h3> </div> </template> <script> export default { name : "Main", computed : { myName (){ return this.$store.state.userName; } } } </script>
通過一個計算屬性獲取到存儲在全局容器store中state保存的狀態(tài)值
四,在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的值,頁面上也會發(fā)生變化
五、,我們通過一些交互來改變狀態(tài),看下組件是否能收到state的值
在components組件下新建一個Header.vue組件,代碼如下:
<template> <div> <input type="text" v-model="msg" /> <input type="button" v-on:click="setName" value="點(diǎn)我" /> </div> </template> <script> export default { name : 'Header', data(){ return { msg : '' } }, methods : { setName(){ this.$store.state.userName = this.msg; } } } </script>
App.vue引入組件Header
App.vue代碼如下:
<template> <div id="app"> <Headerc></Headerc> <Mainc></Mainc> </div> </template> <script> import Headerc from './components/Header.vue'; import Mainc from './components/Main.vue'; export default { name: 'app', components : { Headerc, Mainc } } </script>
當(dāng)我點(diǎn)擊按鈕的時候,改變state中useName的值,Main組件中的state.userName的值也會跟著更新,這種改變方式很好理解,接下來我們看下vuex推薦的狀態(tài)改變方式
六、vuex推薦的狀態(tài)改變方法
在store.js中新建一個mutations,存放被修改的狀態(tài)
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { userName : 'ghostwu' }, mutations : { showUserName( state, msg ){ state.userName = msg; } } }) export default store
其中第一個參數(shù) state 就是 $store.state,第二個參數(shù) msg 需要另外傳入,這個參數(shù)我們通過Header.vue的點(diǎn)擊事件中的方法來傳遞
Header.vue代碼:
<template> <div> <input type="text" v-model="msg" /> <input type="button" v-on:click="setName" value="點(diǎn)我" /> </div> </template> <script> export default { name : 'Header', data(){ return { msg : '' } }, methods : { setName(){ this.$store.commit( 'showUserName', this.msg ); } } } </script>
$store.commit 把this.msg的值提交給showUserName。state就收到了改變的狀態(tài)了,這就是一個vuex最基本的用法和作用
以上這篇Vue2.0基于vue-cli+webpack Vuex的用法(實例講解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-resourse將json數(shù)據(jù)輸出實例
這篇文章主要為大家詳細(xì)介紹了vue-resourse將json數(shù)據(jù)輸出實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03element-ui中el-table不顯示數(shù)據(jù)的問題解決
這篇文章主要介紹了element-ui中el-table不顯示數(shù)據(jù)的問題解決,這是最近在做列表首頁時遇到的一個問題,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07vue router動態(tài)路由設(shè)置參數(shù)可選問題
這篇文章主要介紹了vue-router動態(tài)路由設(shè)置參數(shù)可選,文中給大家提到了vue-router 動態(tài)添加 路由的方法,需要的朋友可以參考下2019-08-08詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用
本篇文章主要介紹了詳解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 構(gòu)建記事本應(yīng)用 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06