vuex

如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 : <!--父组件中引入子组件--> <template> <div> <a href="javascript:;" @click="show = true">点击</a> <t-dialog :show="show" @dialog_event="hide_dialog"></t-dialog> </div> </template> <script> import dialog from './components/dialog.vue' export default { data(){ return { show:false } }, methods:{ //收到子组件的消息 , 改变show的值 hide_dialog(){ this.show = false; } }, components:{ "t-dialog":dialog } } </script> <!--子组件--> <template> <el-dialog

Vuex 一句话概括：state是数据源，mutation/action触发修改数据（getter封装数据），将state映射到view。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 每个应用将仅仅包含一个 store 实例 如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。 ----摘自官网 1.State 总结：存储状态管理数据 2.Getter 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。 Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。 组件获取 state 用 vuex 的 getter。 Getters 会暴露为 store.getters 对象。 ----摘自官网 总结：getter用于获取state数据(获取的数据可能经过封装，getters只是用来读取数据，不能用来改变数据。) 3.Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。” 可以向 store.commit 传入额外的参数，即

detools插件作用：跟踪记录每一次改变state的状态，从而知道是哪个组件修改了state （前提：state是通过 mutations 修改） 如下例，目标为通过点击按钮修改mutations中的counter vuex配置文件index.js 创建store文件夹，在其中创建index.js文件来存放Vuex配置代码 import Vue from 'vue' import Vuex from 'vuex' //1、安装插件 Vue . use ( Vuex ) //2、创建对象 const store = new Vuex . Store ( { state : { counter : 0 } , //state中存放数据 mutations : { increament ( state ) { state . counter ++ } //mutations中确定方法 } } ) //导出store export default store 挂载到Vue实例中 为了让所有的Vue组件都可以使用这个store对象： 在main.js中导入store对象，并且放在new Vue中，这样，在其他Vue组件中，就可以通过this.$store的方式，获取到这个store对象 main.js文件： import Vue from 'vue' import App from '.