如何在Vue項(xiàng)目中使用vuex
在Vue項(xiàng)目中使用vuex
在一個(gè)vue項(xiàng)目中使用vuex，需要根據(jù)項(xiàng)目來源分兩種情況 ：
- 第一種情況：在老項(xiàng)目中使用。 先額外安裝vuex包，然后在配置。
- 第二種情況：在新項(xiàng)目中使用。 在配置vue-cli中創(chuàng)建項(xiàng)目時(shí)，就可以直接選中vuex項(xiàng)，這樣就不用做任何配置了（腳手架會(huì)自動(dòng)幫我們完成的）。
具體如下圖示：
這里我們主要說明第一種情況，在一個(gè)老項(xiàng)目中如何使用vuex，步驟如下：
1.首先安裝vuex包，安裝完之后開始配置
2.在src目錄下創(chuàng)建一個(gè)文件夾store，在store文件夾中新建一個(gè)index.js文件
3.創(chuàng)建Vuex.store實(shí)例 ：index.js中進(jìn)行如下配置：
4.向Vue實(shí)例注入store：main.js中進(jìn)行如下配置：
5.配置完后就可以在任意組件中使用了
在任意組件中，通過this.$store.state 來獲取公共數(shù)據(jù)，在模板中，則可以省略this而直接寫成： {{$store.state.屬性名}}
一、安裝vuex
npm install vuex --save
二、創(chuàng)建store
在項(xiàng)目src目錄下創(chuàng)建store目錄，在store目錄中創(chuàng)建index.js文件。
寫入一下內(nèi)容：
import Vue from 'vue'
import Vuex from 'vuex'
// 掛在Vuex
Vue.use(Vuex)
// 創(chuàng)建Vuex對(duì)象
const store = new Vuex.Store({
state:{
// 存放的鍵值對(duì)就是所要管理的狀態(tài)
// 以key：value為例
key : value,
}，
mutations:{
setKey(state, payload) {
state.key = payload;
}
}
})
export default store三、掛載store
在main.js中，添加代碼：
import store from './store'
new Vue({
el: '#app',
router,
store: store, //store:store 和 router一樣，將我們創(chuàng)建的Vuex實(shí)例掛載到這個(gè)vue實(shí)例中
components: { App },
template: '<App/>'
})四、在組件中使用
將需要使用的值寫在computed中：
computed：{
? ? key() {
? ? ? ? return this.$store.state.key;
? ? }
}如果在組件中使用v-model綁定computed中的值，需要在computed中定義set方法，如下：
computed:{
? ? key:{
? ? ? ? get(){
? ? ? ? ? ? return this.$store.state.key;
? ? ? ? },
? ? ? ? set(val){
? ? ? ? ? ? this.$store.commit('setKey', val);
? ? ? ? }
? ? }
}五、在Vue組件中監(jiān)聽Vuex
在Vue組件中監(jiān)聽Vuex：
- 通過computed獲取vuex中的狀態(tài)值。
- 通過watch監(jiān)聽值的改變。
computed:{
? ? key(){
? ? ? ? return this.$store.state.key;
? ? }
},
watch:{
? ? key(val) {
? ? ? ? // 要做的操作
? ? }
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue長按事件和點(diǎn)擊事件沖突的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue+WebSocket頁面實(shí)時(shí)刷新長連接的實(shí)現(xiàn)
最近vue項(xiàng)目要做數(shù)據(jù)實(shí)時(shí)刷新，數(shù)據(jù)較大，會(huì)出現(xiàn)卡死情況，所以本文主要介紹了頁面實(shí)時(shí)刷新長連接，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了Vue父組件監(jiān)聽子組件生命周期,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue中的proxy代理的用法(解決跨域問題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例
這篇文章主要介紹了基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
Vue多種方法實(shí)現(xiàn)表頭和首列固定的示例代碼
本篇文章主要介紹了Vue多種方法實(shí)現(xiàn)表頭和首列固定的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue組件生命周期運(yùn)行原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
vue項(xiàng)目中存儲(chǔ)與使用后端傳遞過來的token
vue作為一個(gè)單頁面應(yīng)用,vuex作為它的狀態(tài)管理工具,它至少是可以很好的保存這個(gè)token值,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中存儲(chǔ)與使用后端傳遞過來的token的相關(guān)資料,需要的朋友可以參考下2023-03-03
如何解決Vue3組合式API模式下動(dòng)態(tài)組件不渲染問題
這篇文章主要介紹了如何解決Vue3組合式API模式下動(dòng)態(tài)組件不渲染問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教<BR>2024-03-03
關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10