Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)
在這之前,我已經(jīng)分享過組件與組件的通信機(jī)制以及父子組件之間的通信機(jī)制,而我們的vuex就是為了解決組件通信問題的
vuex是什么東東呢?
組件通信的本質(zhì)其實(shí)就是在組件之間傳遞數(shù)據(jù)或組件的狀態(tài)(這里將數(shù)據(jù)和狀態(tài)統(tǒng)稱為狀態(tài)),但可以看到如果我們通過最基本的方式來(lái)進(jìn)行通信,一旦需要管理的狀態(tài)多了,代碼就會(huì)變得十分臃腫和龐大。對(duì)所有狀態(tài)的管理便會(huì)顯得力不從心,因此,vuex出現(xiàn)了,他就是幫助我們把公用的狀態(tài)全抽出來(lái)放在vuex的容器中,然后根據(jù)一定的規(guī)則來(lái)進(jìn)行管理,我們趕緊來(lái)用一下吧,想要掌握vuex的用法,你應(yīng)該要掌握組件之間的通信,如果不了解,請(qǐng)參考以下這兩篇文章:
Vue2.0基于vue-cli+webpack父子組件通信教程(實(shí)例講解)
Vue2.0基于vue-cli+webpack同級(jí)組件之間的通信教程(推薦)
搭建環(huán)境開始:
在git命令行下,執(zhí)行以下命令完成環(huán)境的搭建:
1,npm install --global vue-cli 安裝vue命令行工具
2,vue init webpack vue-demo 使用vue命令生成一個(gè)webpack項(xiàng)目,項(xiàng)目名稱為vue-demo
3,cd vue-demo 切入項(xiàng)目
4,npm install安裝package.json中的所有依賴包
5,npm run dev運(yùn)行項(xiàng)目
然后刪除默認(rèn)的Hello.vue組件,把App.vue整理成以下樣子
<template> <div id="app"> 這是一個(gè)空的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中引入,并注冊(cè)store:這樣我們就能通過this.$store來(lái)獲得這個(gè)容器了
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存儲(chǔ)了一個(gè)狀態(tài)userName
三、將狀態(tài)中的數(shù)據(jù)渲染到組件中
在components下面新建一個(gè)組件Main.vue,代碼如下:
<template> <div> <h3>{{myName}}</h3> </div> </template> <script> export default { name : "Main", computed : { myName (){ return this.$store.state.userName; } } } </script>
通過一個(gè)計(jì)算屬性獲取到存儲(chǔ)在全局容器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>
這個(gè)時(shí)候,就能看見在頁(yè)面上把store容器中 state的userName的值讀取出來(lái)了, 如果修改userName的值,頁(yè)面上也會(huì)發(fā)生變化
五、,我們通過一些交互來(lái)改變狀態(tài),看下組件是否能收到state的值
在components組件下新建一個(gè)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)擊按鈕的時(shí)候,改變state中useName的值,Main組件中的state.userName的值也會(huì)跟著更新,這種改變方式很好理解,接下來(lái)我們看下vuex推薦的狀態(tài)改變方式
六、vuex推薦的狀態(tài)改變方法
在store.js中新建一個(gè)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
其中第一個(gè)參數(shù) state 就是 $store.state,第二個(gè)參數(shù) msg 需要另外傳入,這個(gè)參數(shù)我們通過Header.vue的點(diǎn)擊事件中的方法來(lái)傳遞
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)了,這就是一個(gè)vuex最基本的用法和作用
以上這篇Vue2.0基于vue-cli+webpack Vuex的用法(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue webpack多頁(yè)面構(gòu)建的實(shí)例代碼
這篇文章主要介紹了vue webpack多頁(yè)面構(gòu)建的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09Vue項(xiàng)目中常用的工具函數(shù)總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中常用的工具函數(shù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
這篇文章主要介紹了使用electron打包Vue前端項(xiàng)目的詳細(xì)流程,文中通過圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)electron打包Vue有一定的幫助,需要的朋友可以參考下2024-04-04vue-resourse將json數(shù)據(jù)輸出實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue-resourse將json數(shù)據(jù)輸出實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Vuepress使用vue組件實(shí)現(xiàn)頁(yè)面改造
這篇文章主要為大家介紹了Vuepress使用vue組件實(shí)現(xiàn)頁(yè)面改造示例過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue實(shí)現(xiàn)數(shù)字翻頁(yè)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁(yè)動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08element-ui中el-table不顯示數(shù)據(jù)的問題解決
這篇文章主要介紹了element-ui中el-table不顯示數(shù)據(jù)的問題解決,這是最近在做列表首頁(yè)時(shí)遇到的一個(gè)問題,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07vue router動(dòng)態(tài)路由設(shè)置參數(shù)可選問題
這篇文章主要介紹了vue-router動(dòng)態(tài)路由設(shè)置參數(shù)可選,文中給大家提到了vue-router 動(dòng)態(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)用 ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06