超簡單入門Vuex小示例

linkin 發布于2019-08-22 13:52 / 2070人閱讀

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

寫在前面

本文旨在通過一個簡單的例子，練習vuex的幾個常用方法，使初學者以最快的速度跑起來一個vue + vuex的示例。

學習vuex需要你知道vue的一些基礎知識和用法。相信點開本文的同學都具備這個基礎。

另外對vuex已經比較熟悉的大佬可以忽略本文。

生成基于vue的項目

基于vue-cli腳手架生成一個vue項目
常用npm命令：

npm i vue-vli -g
vue --version
vue init webpack 項目名

進入項目目錄，使用npm run dev先試著跑一下。

一般不會出現問題，試跑成功后，就可以寫我們的vuex程序了。

使用vue完成的示例

使用vuex首先得安裝vuex，命令：

npm i vuex --save

介紹一下我們的超簡單Demo，一個父組件，一個子組件，父組件有一個數據，子組件有一個數據，想要將這兩個數據都放置到vuex的state中，然后父組件可以修改自己的和子組件的數據。子組件可以修改父組件和自己的數據。

先放效果圖，初始化效果如下：

如果想通過父組件觸發子組件的數據，就點“改變子組件文本”按鈕，點擊后效果如下：

如果想通過子組件修改父組件的數據，就在子組件點擊“修改父組件文本”按鈕，點擊后效果如下：

代碼文件介紹

首先是Parent.vue組件

下面是Child.vue子組件

最后是vuex的配置文件

import Vue from "vue"
import Vuex from "vuex";

Vue.use(Vuex)

const state = {
    testMsg: "原始文本",
    childText:"子組件原始文本"
}

const mutations = {
    changeTestMsg(state, str){
        state.testMsg = str;
    },
    changeChildText(state, str){
        state.childText = str;
    }

}

const store = new Vuex.Store({
    state: state,
    mutations: mutations
})

export default store;

后記

通過該vuex示例，了解vuex的常用配置及方法調用。希望對不怎么熟悉vuex的同學快速上手vuex項目有點幫助。

因為沒太多東西，我自己也是剛接觸，本例就不往GitHub扔了，如果嘗試了本例，但是沒有跑起來的同學，可以一起交流下。

云服務器 GPU云服務器 webrtc 簡單示例最簡單的webrtc示例 html5簡單示例 linux小程序示例

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

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

vuex其實超簡單,只需3步

摘要：每一條被記錄，都需要捕捉到前一狀態和后一狀態的快照。然而，在上面的例子中中的異步函數中的回調讓這不可能完成因為當觸發的時候，回調函數還沒有被調用，不知道什么時候回調函數實際上被調用實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。前言之前幾個項目中,都多多少少碰到一些組件之間需要通信的地方,而因為種種原因,event bus 的成本反而比vuex還高, 所以技術選型上選用了 v...

binta 2019-08-02 11:53 評論0 收藏0
vuex其實超簡單,只需3步

摘要：每一條被記錄，都需要捕捉到前一狀態和后一狀態的快照。然而，在上面的例子中中的異步函數中的回調讓這不可能完成因為當觸發的時候，回調函數還沒有被調用，不知道什么時候回調函數實際上被調用實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。前言之前幾個項目中,都多多少少碰到一些組件之間需要通信的地方,而因為種種原因,event bus 的成本反而比vuex還高, 所以技術選型上選用了 v...

summerpxy 2019-08-23 12:38 評論0 收藏0
vuex其實超簡單,只需3步

摘要：前言之前幾個項目中都多多少少碰到一些組件之間需要通信的地方而因為種種原因的成本反而比還高所以技術選型上選用了但是不知道為什么團隊里的一些新人一聽到就開始退縮了因為很難真的很難嗎今天我們用簡單的步來證明一下有多簡單純屬個人經驗難免有不正確的地前言之前幾個項目中,都多多少少碰到一些組件之間需要通信的地方,而因為種種原因,event bus 的成本反而比vuex還高, 所以技術選型上選用...

zhichangterry 2019-08-22 17:20 評論0 收藏0
vuex其實超簡單,喝完這3步,還有3步

摘要：每一條被記錄，都需要捕捉到前一狀態和后一狀態的快照。然而，在上面的例子中中的異步函數中的回調讓這不可能完成因為當觸發的時候，回調函數還沒有被調用，不知道什么時候回調函數實際上被調用實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。上一篇 vuex其實超簡單,只需3步簡單介紹了vuex的3步入門,不過為了初學者容易消化,我削減了很多內容,這一節,就是把少掉的內容補上,如果你沒看過上...

kumfo 2019-08-22 17:23 評論0 收藏0