超簡單入門Vuex小示例

寫在前面

本文旨在經過一個簡單的例子，練習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組件

<template>
    <div class="parent">
        <h3>這裏是父組件</h3>
        <button type="button" @click="clickHandler">修改本身文本</button>
        <button type="button" @click="clickHandler2">修改子組件文本</button>
        <div>Test: {{msg}}</div>
        <child></child>
    </div>
</template>

<script>
    import store from '../vuex'
    import Child from './Child.vue'

    export default {

        computed: {
            msg(){
                return store.state.testMsg;
            }
        },
        methods:{
            clickHandler(){
                store.commit('changeTestMsg', '父組件修改本身後的文本')
            },
            clickHandler2(){
                store.commit('changeChildText', '父組件修改子組件後的文本')
            }
        },
        components:{
            'child': Child
        },
        store,
    }
</script>

<style scoped>
    .parent{
        background-color: #00BBFF;
        height: 400px;
    }
</style>

複製代碼

下面是Child.vue子組件

<template>
    <div class="child">
        <h3>這裏是子組件</h3>
        <div>childText: {{msg}}</div>
        <button type="button" @click="clickHandler">修改父組件文本</button>
        <button type="button" @click="clickHandler2">修改本身文本</button>
    </div>
</template>

<script>
    import store from '../vuex'
    export default {
        name: "Child",
        computed:{
            msg(){
                return store.state.childText;
            }
        },
        methods: {
            clickHandler(){
                store.commit("changeTestMsg", "子組件修改父組件後的文本");
            },
            clickHandler2(){
                store.commit("changeChildText", "子組件修改本身後的文本");
            }
        },
        store
    }
</script>

<style scoped>
    .child{
        background-color: palegreen;
        border:1px solid black;
        height:200px;
        margin:10px;
    }
</style>


複製代碼

最後是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扔了，若是嘗試了本例，可是沒有跑起來的同窗，能夠一塊兒交流下。

編程重在實踐，趕忙去跑一下吧。

關於本文

若是這篇文章使你有所收穫，不勝榮幸。 歡迎點贊，以期能幫助更多同窗！

關於做者

技術博客

GitHub

掘金主頁