超级简单入门vuex 小实例
栏目: JavaScript · 发布时间: 6年前
内容简介:这个小示例是借助另外一个作者的示例稍加改动而来,相比原著增加了:getters、actions、mapState目的是为了更好的理解vuex的几个核心属性。感谢原作者。大佬请跳过。文末附有另一个作者的链接地址以及demo的下载地址。
这个小示例是借助另外一个作者的示例稍加改动而来,相比原著增加了:getters、actions、mapState
目的是为了更好的理解vuex的几个核心属性。感谢原作者。
大佬请跳过。文末附有另一个作者的链接地址以及demo的下载地址。
效果展示
项目准备
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; 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 通过实例入门Golang
- 实例入门 Vue.js 单元测试
- 实例详解Spring MVC入门使用
- Spark 入门实战之最好的实例
- electron vue桌面应用入门实例
- 机器学习入门教程:启发式实例
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。