使用Vuex解决组件间通讯|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的 官方网站。