超級簡單入門vuex 小例項

李二狗子發表於2018-12-07
Vue

前言

這個小示例是藉助另外一個作者的示例稍加改動而來，相比原著增加了:getters、actions、mapState

目的是為了更好的理解vuex的幾個核心屬性。感謝原作者。

大佬請跳過。文末附有另一個作者的連結地址以及demo的下載地址。

簡單補充幾點vuex 核心點

  • state:儲存資料
  • getters：資料處理和資料複用
  • Mutations：提交 mutation 修改data值 （同步函式）
  • Actions： Action 不直接更改狀態，而是提交 mutation（Action 可以包含任何非同步操作）

效果展示

超級簡單入門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;
複製程式碼

結尾

希望多一點入門分享示例，世界更美好。

原著地址：傳送門

demo下載地址：傳送門

附上另一個vuex核心講解地址：傳送門

歡迎大家一起交流學習，指出不對的地方。

相關文章