未加星标

超级简单入门vuex 小实例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

这个小示例是借助另外一个作者的示例稍加改动而来,相比原著增加了: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; 复制代码

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:超级简单入门vuex 小实例
本站链接:https://www.codesec.net/view/620743.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(10)