Vue和Vuex第一次接触时遇到的凹坑

在Vue.js的项目中，如果项目结构简单，父子组件之间的数据传输可以使用props或者$emit等

https://www.jb51.net/article/110186.htm

但是如果是大型项目，往往需要在子组件之间传递数据，使用以前的方法并不方便。Vue的状态管理工具Vuex完美的解决了这个问题。

一、Vuex的安装和引入

项目结构：

首先使用npm安装Vuex

cnpm安装vuex -S

然后在main.js中介绍它

从“vue”导入Vue从“App”导入。/App ' import Vuex from ' Vuex ' import store from '。/Vuex/store ' vue . use(Vuex)/* eslint-disable no-new */Newvue({ El : ' # app '，store，render:h=h (app)})其次，构建核心仓库store.js

Vuex应用程序状态应该存储在store.js中，Vue组件可以从store.js中获取状态，store可以理解为全局变量的仓库。

但是，与简单的全局变量有一些区别，主要体现在当商店中的状态发生变化时，相应的vue组件会高效更新。

在src目录下创建一个vuex目录，并将store.js放入vuex目录中

从' vue '导入vue从' vuex '导入vue . use(vuex)const store=new vuex . store({//define state : { author 3360 ' wise error ' })导出默认存储这是最简单的store.js，其中只存储一个状态作者。

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

第三，将状态映射到组件

模板页脚类=' footer ' ul Li v-for=' lis in ul ' { lis . Li } }/Li/ul p版权所有{{author}} - 2016保留所有权利/p /footer/Template脚本导出默认{name :' footer div '，data () {return {ul: [{li: '玻璃之金' }，{li: '朦胧森林' }，{li3360 '缥缈之深' }，{li: '之火$ store.state.author}}}/script这是footer.vue的html和脚本部分

主要是在计算中，这个的值。$store.state.author以html格式返回给作者

页面呈现后，您可以获得author的值

第四，修改组件中的状态

然后在header.vue中添加一个输入框，并将该输入框的值传递给store.js中的author

这里我使用元素用户界面作为样式框架

输入框输入的值被绑定到inputTxt，然后点击事件被绑定到back按钮上以触发setAuthor方法

methods : { set author : FuncTion(){ this。$ store . state . author=this . input txt } }在setauthor方法中，将输入框的值inputTxt赋值给Vuex中的状态作者，从而实现子组件之间的数据传递

动词（verb的缩写）官方推荐的修改状态的方法

在上面的例子中，state author是通过setAuthor中的赋值直接修改的，但是vue官方推荐以下方法：

首先，在store.js中定义一个newAuthor方法，其中第一个参数state为$store.state，第二个参数msg需要导入。

然后修改header.vue中的setAuthor方法

在这里，使用$ store。提交以提交新作者，并将此. input text发送到msg以修改作者

通过这种方式，我们可以显式地提交更改，因此我们可以更好地跟踪每个状态的更改。因此，在大型项目中，建议采用第二种方法。

摘要

以上是边肖介绍的Vue和Vuex第一次接触遇到的坑。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！