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

admin2023-01-1857921

记录自己的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的 官方网站

网友评论当前共有1条评论

  • 2018-03-06 13:49:15

    Vuex 2 教程,入门到提高