超簡單入門Vuex小示例

時間 2019-11-06

標籤簡單入門 vuex 示例简体版

原文原文鏈接

寫在前面

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

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

另外對vuex已經比較熟悉的大佬能夠忽略本文。web

生成基於vue的項目

基於vue-cli腳手架生成一個vue項目
經常使用npm命令：vuex

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

進入項目目錄，使用npm run dev先試着跑一下。vue-cli

通常不會出現問題，試跑成功後，就能夠寫咱們的vuex程序了。npm

使用vue完成的示例

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

npm i vuex --save

介紹一下咱們的超簡單Demo，一個父組件，一個子組件，父組件有一個數據，子組件有一個數據，想要將這兩個數據都放置到vuex的state中，而後父組件能夠修改本身的和子組件的數據。子組件能夠修改父組件和本身的數據。spa

先放效果圖，初始化效果以下：code

若是想經過父組件觸發子組件的數據，就點「改變子組件文本」按鈕，點擊後效果以下：component

若是想經過子組件修改父組件的數據，就在子組件點擊「修改父組件文本」按鈕，點擊後效果以下：

代碼文件介紹

首先是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;