前言
这个小示例是借助另外一个作者的示例稍加改动而来, 相比原著增加了: 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;
结尾
希望多一点入门分享示例, 世界更美好.
原著地址: 传送门 https://segmentfault.com/a/1190000012881956
demo 下载地址: 传送门 https://github.com/saintsichou/vuex
来源: https://juejin.im/post/5c09f75a51882535422e5008