1为什么需要状态管理

Vue组件分为模型和视图。当方法中的方法更新数据时，视图也会自动更新。

message.vue

template div { { message } } button @ click=' change message ' change content/button/div/template script export default { name : ' message '，data(){ return { message : ' hello ' }；}，方法： {changemessage () {this。消息='我很好' } } }/脚本效果：

本例中的message和changeMessage()只能在message.vue组件中使用。在实际应用中，常见的需求是跨组件共享数据。这时可以通过Vuex O(_)O优雅高效地管理组件的状态~

注：Vuex有一定的技术门槛，主要应用于多人开发的大规模单页应用。因此，是否使用Vuex取决于球队规模和技术储备。

2安装Vuex

Npminstall-savevuex安装版本：[emailprotected]

3基本用法

3.1 Vuex的介绍

在main.js中介绍Vuex:

.从“Vuex”导入Vuex；//加载vuex插件vue . use(Vuex)；//Vuex配置const store=new Vuex . store({ state : }.}，突变3360 {.}});新Vue({ el: '#app '，//使用vuex store:商店，vuex中的存储包含应用程序的数据状态和操作过程。当存储中的数据发生变化时，使用该数据的组件将立即更新。

3.2定义数据

数据在Vuex的states属性中定义。

让我们以计数器为例。计数数据被定义并初始化为0:

const store=new Vuex。存储({ state : { count : 0 } })；3.3读取数据

定义数据后，可以通过vue组件中的$store.state.count读取数据，例如，可以在index.vue中编写如下：

模板div.{{count}}./div/templatescript导出默认值{ name: 'index.vue '，computed : { count(){ return this。$ store . state . count；} },}/script在这里，使用计算属性从Vuex的存储中读取计数器的当前值。

3.4修改数据

您可以使用Vuex的突变属性修改状态中定义的数据。我们为计数器定义增加和减少操作：

const store=new Vuex。存储({ state: { count: 0 }，突变： { increment(state，n=1){ state . count=n；}，减少(状态){ state . count-；} }});突变中的函数可以有两个参数。第一个参数是state，第二个参数可以是任何类型。例如，您可以在这里指定新操作的增量。如果不指定，增量将默认为1。

注意：如果需要传入多个参数，我们可以在这里传入一个有多个参数的对象。

这里，使用了ES 6为函数设置默认值的语法。增量(状态，n=1)相当于：

增量(状态，n){ n=n | | 1；}在*。vue组件，你可以通过它执行突变。$store.commit方法。在index.vue中，我们为“1”、“1”和“3”操作添加了三个按钮：

模板div {{count}}按钮@ click=' handle increment ' 1/按钮按钮@ click=' handle reduce '-1/按钮按钮@ click=' handle incrementmore ' 3/按钮/div/模板脚本导出默认值{.methods : {handle增量(){ this。$ store.commit(' increment ')；}，handle reduce(){ this。$store.commit('减少')；}，handleIncrementMore() { this。$store.commit('increment '，3)；}}}/scriptthis。$ store.submit方法是在突变中定义的函数名。

您也可以通过指定类型提交，类型的值是在突变中定义的函数名：

main.js

const store=new Vuex。存储({ state: { count: 0 }，经过修改后为： }.incrementByParam(state，params){ state . count=params . count；} }});index.vue

模板div {{count}}.button @ click=' handleByParam ' 30/button/div/template script导出默认值{.methods: {.handleByParam() { this。$ store.commit({ type : ' incrementByParam '，count : 30 })；}，} }/script注意：如果数据在突变中异步操作，组件在提交后将无法立即更改数据。因此，在突变中，建议尽可能使用同步方法来操作数据。

效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。