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