Супер простое начало работы с небольшим примером Vuex

JavaScript Vue.js Vuex

написать впереди

Эта статья направлена ​​на отработку нескольких распространенных методов vuex на простом примере, чтобы новички могли запускать пример vue + vuex с максимальной скоростью.

Изучение vuex требует от вас некоторых базовых знаний и навыков использования vue. Я считаю, что у студентов, которые нажали на эту статью, есть эта основа.

Кроме того, те, кто уже знаком с vuex, могут игнорировать эту статью.

Создание проекта на основе vue

Создайте проект vue на основе каркаса vue-cli Общие команды нпм:

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

Войдите в каталог проекта и используйте npm run dev, чтобы сначала попытаться запустить его.

В общем проблем не будет, после успешного запуска теста можно писать нашу vuex программу.

Пример с vue

Чтобы использовать vuex, вы должны сначала установить vuex, командой:

npm i vuex --save

Представьте нашу супер простую демонстрацию, родительский компонент, дочерний компонент, родительский компонент имеет данные, дочерний компонент имеет данные, вы хотите поместить оба данных в состояние vuex, а затем родительский компонент может изменить свои собственные и данные дочернего компонента. Дочерние компоненты могут изменять родительские компоненты и свои собственные данные.

Сначала поместите рендеры, эффект инициализации выглядит следующим образом:

Если вы хотите инициировать данные дочернего компонента через родительский компонент, нажмите кнопку «Изменить текст дочернего компонента», и эффект будет следующим:

Если вы хотите изменить данные родительского компонента через дочерний компонент, нажмите кнопку «Изменить родительский компонентный текст» в компоненте для детей, и эффект выглядит следующим образом:

Знакомство с файлами кода

Первый — это компонент 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

Домашняя страница Наггетс

Категории