使用 Vuex 解决组件间通讯|vuex 基础教程

首先说vuex是干什么用的：

VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )

要如何使用呢，安装就不说了，直接npm install vuex, 今天就用一个Vue最常用的例子todoList作为学习目标，直接上代码：

如果你是使用vue-cli脚手架创建的项目，项目目录应该跟我一样在你的 main.js 引入 vuex

import Vue from 'vue'
import App from './App.vue';
import Vuex from 'vuex'; // 这里
import store from '../vuex/store.js'// 你自己的vuex store实例
Vue.use(Vuex);

new Vue({
    el: '#app',
    store, // 这里是将你的store注入到你所有的组件，组件里面可以直接使用 `this.$store.state.字段名`来访问
    render: h => h(App)
})

接下来看我们 vuex (这个目录可以自己定义) 目录下的 store.js 内容

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
    state : {
        message : 'this message from Store ',
        todoList: [
            {id : 1, todo : '学习VUE',done : true},
            {id : 2, todo : '学习laravel',done : false},
            {id : 3, todo : '学习webpack',done : false}
        ]
    },
    // mutations 为唯一可以操作state 数据的方法
    // 下面我们定义两个方法，一个添加todoList，一个删除todoList
    mutations: {
        // 接收两个参数，state 和需要操作的数据payload
        addTodoList (state, payload){
            console.log(state);
            state.todoList.push({id:state.todoList.length + 1,todo:payload,done:false})
        },
        deleteTodo(state,payload){
            state.todoList.splice(payload,1)
        }
    }

})

export default store;

再看我们App组件里面如何使用，为了更清晰，我使用两个组件实现todoList,一个实现添加功能，一个现实展示和删除功能。

结构如下：

---app
------todoInput
------todoList

先看App.vue，这里面只是展示todoInput和toduList为兄弟组件

<template>
  <div id="app">
    <div class="container">
      <div class="header clearfix">
      <todo-input></todu-input>
      </div>
      <div class="container theme-showcase">
      <todu-list></todo-list>
      </div>
    </div>
  </div>
</template>

<script>
  import todoList from  './todoList.vue'
  import todoInput from './toduInput.vue'
  export default {
      components : { todoList,todoInput },// 注册组件
      name: 'app',
      data () {
          return {

          }
      },

}
</script>

再看toduInput.vue

<template>
    <div id="input">
        <div class="form-group">
            <div class="row">
                <input type="text" class="form-control " @keyup.enter="addTodo" v-model="newTodo">
                <button class="tbn btn-success  form-control" @click.enter="addTodo" >添加</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default({
        name :'input',
        data(){
            return {
                newTodo : '',
            }
        },
        methods : {
            addTodo(){
                //这里使用commit来提交 addTodoList mutations
                this.$store.commit('addTodoList',this.newTodo)
            }
        }
    })
</script>

todoList.vue

<template>
    <div id="hello">
        <div>
            <div class="container">
                <div class="row">
                    <ul class="list-group">
                        <li class="list-group-item" v-for="(todo, index) in todoList"><span class="badge" v-if="todo.done == false">未完成</span>
                            <button class="btn tbn-success btn-xs" @click="deleteTodo(index)">X</button>
                            {{ todo.todo}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'hello',
        data () {
            return {
                newTodo : '',
            }
        },
        props: ['msMsg'],
        methods : {
            // 这里我们使用cimmit 提交删除操作
            deleteTodo (index){
                console.log(index)
                this.$store.commit('deleteTodo',index)
            }
        },
        computed : {
            todoList(){
                // 这里我们获取state的数据进行渲染
                return this.$store.state.todoList
            }
        }
    }
</script>

<style lang="scss">

</style>

今天就分析最基本的todoList的添加和删除操作，使用到了vuex的mutations，还有getters，actions等等，后期再做分享。
或者你也可以看vuex的官方网站。
最后提供我的代码供大家参考 github地址