如何在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) {
? ? ? ? // 要做的操作
? ? }
}

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

淺談Vue響應式(數(shù)組變異方法)
這篇文章主要介紹了淺談Vue響應式(數(shù)組變異方法)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue.js $refs用法案例詳解
這篇文章主要介紹了Vue.js $refs用法案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-09-09
vue如何實現(xiàn)角色權限的控制
關于角色與權限控制,通常是分為兩大類,一種是菜單權限,一種是操作權限,本文將深入探討如何通過?Vue?實現(xiàn)角色權限控制,特別是基于按鈕級別的權限控制,需要的可以了解下
2025-02-02
詳解Vue中的Props與Data細微差別
這篇文章主要介紹了詳解Vue中的Props與Data細微差別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式
這篇文章主要介紹了Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue3中的Fragment使用方法詳解
Fragment 是 Vue 3 中的新特性,允許一個組件模板返回多個根節(jié)點,與傳統(tǒng)方式不同,不再需要一個額外的 DOM 元素來包裹所有內(nèi)容,本文將詳細介紹 Fragment 的概念、使用場景、優(yōu)點以及可能遇到的問題,需要的朋友可以參考下
2024-08-08
vue瀏覽器返回監(jiān)聽的具體步驟
這篇文章主要給大家介紹了關于vue瀏覽器返回監(jiān)聽的具體步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
ant design中upload組件上傳大文件,顯示進度條進度的實例
這篇文章主要介紹了ant design中upload組件上傳大文件,顯示進度條進度的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue3路由新玩法useRoute和useRouter詳解
這篇文章主要介紹了vue3路由新玩法useRoute和useRouter，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue項目中input輸入框輸入不了值問題及解決
這篇文章主要介紹了vue項目中input輸入框輸入不了值問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04