Vuex的基本入門、使用場景及安裝配置

shuibo 發布于2019-08-23 11:28 / 665人閱讀

摘要：基本概念現在回到我們的中創建且聲明一個對象張三李四王五這里不同于文檔中的寫法，我這里直接將創建聲明簡寫成一段代碼個人更偏好這樣寫。

什么是Vuex?

用2句話概括：

主要應用于Vue.js中管理數據狀態的一個庫

通過創建一個集中的數據存儲，供程序中所有組件訪問

當然這么說肯定還是有所不懂，這里我就用單一使用vue.js和使用vuex.js場景的不同進行對比講解

單一使用Vue.js的場景

在單一使用vue.js的場景中，我們難免要在不同的組件中互相傳值。在該場景中，由一個根組件，兩個父組件再各自擁有一個子組件，我們如果使用prop的屬性傳值，在這個詳情組件需要使用添加組件中的某個值時，我們需要不停的觸發某個事件將這個值一層一層一層一層地沿著這個路徑傳過去，這樣能實現將值傳遞給詳情組件，但這是相當的麻煩（鬼知道我當初不知道vuex為了傳值頭有多大）。現在讓我們看下vuex.js場景下的效果

使用Vuex.js的場景

我們將使用專門的store存儲所有的數據，如果我們需要取到組件二或更深一級的子組件的某個數據我們可以直接使用getter方法直接拿到其中的數據。如果我們需要向store中添加或更改某個數據，我們可以用mutation或直接$store.state的形式直接跨過父組件向store中直接添加或更改數據。就好比一個倉庫，所有人能直接跨過上級拿到倉庫中的某個你所需要的東西，這無疑是在我們使用vue開發項目時，相當省時省力的辦法。

Vuex的使用場景

涉及到非父子關系的組件，例如兄弟關系、祖孫關系，甚至更遠的關系組件之間的聯系

中大型單頁應用，考慮如何更好地在組件外部管理狀態

相信大家在看完上面vuex的基本介紹后，心里對它使用場景也有了一個大概的想法。
總而言之，在頁面數據結構比較復雜，數據和組件分離，分別處理，組件量較大的情況下，那么使用 Vuex 是非常合適的。

Vuex的安裝配置

在使用vue-cli腳手架創建項目后

npm install vuex

進入項目安裝vuex,安裝完成后，在項目的文件夾src中再新建一個文件夾store,文件夾中新建文件store.js(命名為本人習慣)。

store.js

//引入vue和Vuex
import Vue from "vue"
import Vuex from "vuex"

//引入之后，對vuex進行引用
Vue.use(Vuex)

main.js

import {store} from "./store/store"

new Vue({
  store:store,//使用store
  el: "#app",
  router,
  components: { App },
  template: "",
  
})

在main.js 中引入vuex文件

到此為止，vuex的引入就算是成功了。

基本概念 State

現在回到我們的store.js中

//創建且聲明一個對象
export const store = new Vuex.Store({
    state:{
        isShow:true,
        items:[
        {
            name:"張三",
            num:"1"
        },
        {
            name:"李四",
            num:"2"
        },
        {
            name:"王五",
            num:"3"
        }
        ]
    }
})

這里不同于文檔中的寫法，我這里直接將創建聲明簡寫成一段代碼（個人更偏好這樣寫）。在state中填寫外部組件需要的數據。外部組件中調取數據：

computed:{
        itemList(){
            return this.$store.state.items
        }
    },

//這里有兩種辦法
//p在computed的itemList方法中循環
{{item.num}}{{item.name}}

//p直接指向store中的state的items數組
{{item.num}}{{item.name}}

可以通過computed中的方法獲取數據，也可以直接使用this.$store.state。

Getters

getters乍一看也是獲取數據，但是在獲取之前它多了一個步驟：計算過濾獲取的數據并返回過濾完成后的數據。如果多個組件需要用到篩選后的數據，那我們就必須到處重復寫該計算屬性函數；或者將其提取到一個公共的工具函數中，并將公共函數多處導入。
store.js

    getters:{
        numChange(state){
            return state.items.forEach(item=>{
                item.num+=100
            })
        }
    }

組件中：

//寫法一：
{{item.num}}{{item.name}}

//寫法二：


computed:{
        numChange(){
            return this.$store.getters.numChange
        }
    },

p標簽在computed中返回getters數據的中循環，數據顯示出來便直接是計算完成后的數據

Mutations

我們可以使用mutations配合vuex提供的commit方法來修改state中的狀態

store.js

export const store = new Vuex.Store({
    state:{
        isShow:false,
        myData:"",
        items:[
            {
                name:"張三",
                num:1
            },
            {
                name:"李四",
                num:2
            },
            {
                name:"王五",
                num:3
            }
            ]
    },
    mutations:{
        //定義一個函數動態修改state的狀態值
        numTurn(state){ /這里的state代表上面的State
            state.items.forEach(item=>{
                item.num+=100
            })
        }
    }
})

組件中：

//寫法一：

//寫法二：


methods:{
        numTurn(){
            this.$store.commit("numTurn")
        }
    }

兩種寫法原理是一樣的，都能實現效果。注意：mutations中的方法需要commit配合回調實現，而不再是$store.mutation,且mutations只能處理同步函數，那如果需要處理異步操作怎么辦？

Action

如文檔中所說,Action類似于Mutations,不同在于：

Aciton提交的是mutation,而不是直接變更狀態

Action可以包含任何異步操作

那也就是說，如果我們是需要任意的異步操作，那就需要在Action中實現

部分內容略過，本文主要關于vuex基礎理解和使用

推薦視頻：https://ke.qq.com/course/258141

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97021.html

Vue.js學習

摘要：一基礎學習模式下圖不僅概括了模式，還描述了在中是如何和以及進行交互的。關于這一點我們將在后續反應系統中討論。父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。這個對象必須是普通對象原生對象，及原型屬性會被忽略。 Vue.js 是用于構建交互式的 Web 界面的庫。Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。其實和Jquery一樣...

TIGERB 2019-08-21 14:15 評論0 收藏0
學習實踐 - 收藏集 - 掘金

摘要：官網地址聊天機器人插件開發實例教程一創建插件在系統技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現購物車場景前端掘金本文是上篇文章的序章，一直想有機會再次實踐下。 2道面試題：輸入URL按回車&HTTP2 - 掘金通過幾輪面試，我發現真正那種問答的技術面，寫一堆項目真不如去刷技術文章作用大，因此刷了一段時間的博客和掘金，整理下曾經被...

mikyou 2019-08-29 12:50 評論0 收藏0
超簡單入門Vuex小示例

摘要：寫在前面本文旨在通過一個簡單的例子，練習的幾個常用方法，使初學者以最快的速度跑起來一個的示例。生成基于的項目基于腳手架生成一個項目常用命令項目名進入項目目錄，使用先試著跑一下。子組件可以修改父組件和自己的數據。寫在前面本文旨在通過一個簡單的例子，練習vuex的幾個常用方法，使初學者以最快的速度跑起來一個vue + vuex的示例。學習vuex需要你知道vue的一些基礎知識和用法。...

linkin 2019-08-22 13:52 評論0 收藏0
Vuex入門到上手教程

摘要：它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。這需要對短期和長期效益進行權衡。改變中的狀態的唯一途徑就是顯式地提交。在里使用進行延遲執行。上下文對象，這里你可以理解稱本身。這篇文章主要介紹了Vuex入門到上手教程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧一、前言當我們的應用遇到多個組件共享狀態時，會需...

rollback 2019-08-26 12:24 評論0 收藏0