超级简单入门vuex 小实例

栏目: JavaScript · 发布时间: 6年前

内容简介:这个小示例是借助另外一个作者的示例稍加改动而来,相比原著增加了:getters、actions、mapState目的是为了更好的理解vuex的几个核心属性。感谢原作者。大佬请跳过。文末附有另一个作者的链接地址以及demo的下载地址。

这个小示例是借助另外一个作者的示例稍加改动而来,相比原著增加了:getters、actions、mapState

目的是为了更好的理解vuex的几个核心属性。感谢原作者。

大佬请跳过。文末附有另一个作者的链接地址以及demo的下载地址。

效果展示

超级简单入门vuex 小实例

项目准备

npm i vue-cli -g
vue list
vue init webpack 项目名
cd 项目名
npm i
npm i vuex --save
npm run start
复制代码

项目结构

├── index.html
├── main.js
├── router
│   └── index.js
├── components
│   ├── parent.vue
│   └── child.vue
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
复制代码

新建父组件 parent.vue

<template>
<div class="parent">
    <h3>这里是父组件</h3>
    <button type="button" @click="clickHandler">修改自己文本</button>
    <button type="button" @click="clickHandler2">修改子组件文本</button>
    <div>Test: {{msg2}}</div>
    <child></child>
</div>
</template>

<script>
/* eslint-disable */
import store from '../store'
import Child from './child.vue'
import {mapState} from 'vuex';
export default {

    computed: {
        ...mapState({
            msg2:state=>state.testMsg 
        })
        //也可以用这个获取msg2
        // msg2 () {
        //     return this.$store.getters.getMsg;
        // }
    },
    methods:{
        clickHandler(){
            this.$store.dispatch('setMsg','李二狗自己')
        },
        clickHandler2(){
             this.$store.dispatch('setMsg2','李二狗儿子')
        }
    },
    components:{
        'child': Child
    },
    store,
}
/* eslint-disable */
</script>
<style scoped>
    .parent{
        background-color: #00BBFF;
        height: 400px;
    }
</style>
复制代码

新建子组件 child.vue

<template>
<div class="child">
    <h3>这里是子组件</h3>
    <div>childText: {{msg2}}</div>
    <button type="button" @click="clickHandler">修改父组件文本</button>
    <button type="button" @click="clickHandler2">修改自己文本</button>
</div>
</template>

<script>
/* eslint-disable */
import store from '../store'
import {mapState} from 'vuex';

export default {
    name: "Child",
    computed:{
        // ...mapState({
        //     msg2:state=>state.childText 
        // })

        msg2 () {
            return this.$store.getters.getMsg2;
        }
    },
    methods: {
        clickHandler(){
            this.$store.dispatch('setMsg','修改父组件')
        },
        clickHandler2(){
             this.$store.dispatch('setMsg2','修改自己')
        }
    },
    store
}
 /* eslint-disable */
</script>

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

新建store index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
/* eslint-disable */
const state = {
    testMsg: '原始文本',
    childText:"子组件原始文本"
}
const getters = {
    getMsg (state) {
        return state.testMsg
    },
    getMsg2 (state) {
        return state.childText
    }
}
const mutations = {
    changeTestMsg(state, str){
        state.testMsg = str;
    },
    changeChildText(state, str){
        state.childText = str;
    }
}
const actions = {
    setMsg({commit, state}, str){
        commit('changeTestMsg', str)
    },
    setMsg2({commit, state}, str){
        commit('changeChildText', str)
    }
}
const store = new Vuex.Store({
    state: state,
    getters:getters,
    actions:actions,
    mutations: mutations
})
/* eslint-disable */
export default store;
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

DOOM启世录

DOOM启世录

[美] 大卫·卡什诺 / 孙振南 / 电子工业出版社 / 2004-4 / 29.00元

由David Kushner 撰写之著作 《Master of DOOM》在 Amazon 和 eBook上的销售喜人。本书的中文版权由我公司拿到,将在2004年4月出版。本书忠实详尽地讲述了两个玩家是如何走上游戏之路,如何制作出迄今为止影响力最大的游戏作品--DOOM和Quake,以及他们为何在最辉煌的时候分道扬镳。本书是国内第一部游戏领域的传记。与所有传记一样,不同的读者能从中得到不同的体验:......一起来看看 《DOOM启世录》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

SHA 加密
SHA 加密

SHA 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试