Vue系统性学习第二篇

5 Vuex组件间参数通信

Vue项目中，若解构简单，父子组件之间的数据可以使用props或者$emit。

5.1 安装和配置vuex

• npm install vuex

• 然后在main.js中引入

import Vue from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

new Vue({
    el: '#app',
    store,
    render: h => h(App)
})

5.2 核心仓库 store.js

• Vuex应用的状态state都存放在store.js，Vue组件可以从store.js里获取状态，可以把store通俗的理解为一个全局变量的仓库。
• store中的状态发生变化时，Vue组件也会快速更新。

在src目录下创建一个vuex目录（一般在创建项目时，会一块创建），打开store.js：

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

Vue.use(Vuex)

const store = new Vuex.store({
    //定义状态
    state:{
        author: 'Aooth Puci'
    }
})
export default store

这个store.js，里只存放了一个状态author

虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次。

5.3 将store状态映射到Vue组件

<template>
    <footer class="footer">
        <ul>
            <li v-for="list in ul">{{list.li}}</li>
        </ul>
        <p>
            Copyright&nbsp;&copy;&nbsp;{{author}} - 2019 All rights reserved
        </p>
    </footer>
</template>

<script>
    export default{
        name: 'footerDiv',
        data(){
            return {
                ul: [
                    {li: 'TooK A'},
                    {li: 'TooK B'},
                    {li: 'TooK C'},
                    {li: 'Took D'},
                    {li: 'TooK Eui'}
                ]
            }
        },
        computed:{
            author(){
                return this.$store.state.author
            }
        }
    }
</script>

• 注意：在computed中，将this.$store.author的值返回给html中的author，页面渲染之后，就能获取到author的值。

5.4 于Vue组件中修改store状态

• 例子：
• 在header.vue中修改添加一个输入框，将输入框的值传给store.js中的author

<template>
    <header>
        <el-input placeholder="请输入内容" v-model="inputText">
            <el-button slot="append" @click="setAuthor" ></el-button>
        </el-inpit>
    </header>
</template>

<script>
    export default {
        name: '',
        data(){
            return{

            }
        },
        methods:{
            setAuthor: function () {
                this.$store.state.author = this.inputText
            }
        }
    }

• 解析：在 setAuthor 方法中，将输入框的值 inputTxt 赋给 Vuex 中的状态 author，从而实现子组件之间的数据传递

5.5 官方推荐的修改状态的方式

不似上5.4之修改方法，推荐如下 ：

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        author: 'Aooth Puci',
    },
    mutations:{
        newAuthor(state, msg){
            state.author = msg
        }
    }
})

export default store;

• 先在store.js中定义一个方法newAuthor，其中第一个参数state就是$store.state，第二个参数msg需要另外传入。
• 然后修改header.vue中的setAuthor()

methods:{
    setAuthor:function(){
        this.$store.commit('newAuthor', this.inputText)
    }
}

下一篇Vue学习笔记「vue components 和vue项目推荐」