vuex的store模式,vue中store的用法
状态管理就是数据状态管理。vue应用程序的组件经常需要相互通信。除了v-on、EventBus等通信方式，还可以使用数据共享进行通信。这种简单的数据共享模式就是存储模式。
目录
概述1。定义store.js2组件使用store.js3实现效果。
概述
状态管理模式的实现思路很简单，就是定义一个store对象，其中状态属性存储共享数据，操作共享数据的方法也存储在对象中。在组件中，store.state共享数据用作部分或全部数据。当更改store.state对象中的共享数据时，必须调用store提供的接口来更改共享数据。
下面是一个简单的待办事项演示，介绍店铺状态管理模式。
1. 定义 store.js
//store.js
导出常量存储={
状态：{
todos: [
{正文：《写语文作业》，完成：假}，
{text:“做数学卷子”，done: false}
]
},
addTodo(str){
const obj={text: str，done: false}
this.state.todos.push(obj)
},
setDone(索引){
this.state.todos[index]。完成=真
}
}
2. 组件使用 store.js
//A.vue
模板
div class=A
我是a成分。
保险商实验所
中的li v-for=(todo，index)
:key=index :class=todo.done？done : @ click= set done(index)
{{todo.text}}
/李
/ul
/div
/模板
脚本
从导入{store}./store/store.js
导出默认值{
姓名：甲，
data(){
返回商店状态
},
方法：{
setDone(索引){
store.setDone(索引)
}
}
}
/脚本
样式范围。一个{
背景：红色；
颜色：白色；
填充：20px
}。a李. done{
背景：绿色；
}
/风格
//B.vue
模板
div class=B
差异
我是组件B，在下方输入框输入任务，在组件a中添加一个任务。
/div
输入类型=text v-model=text
button @click=addTodo 添加todo/button
/div
/模板
脚本
从导入{store}./store/store.js
导出默认值{
姓名： B ，
data(){
返回{
文本：“”
}
},
方法：{
addTodo(){
if(this.text){
store.addTodo(this.text)
}
}
}
}
/脚本
样式范围。B{
背景：黄色；
填充：20px
}
/风格
//App.vue
模板
div id=应用程序
A /
B /
/div
/模板
脚本
从导入。/组件/A.vue
从导入B。/组件/B.vue
导出默认值{
名称：“应用程序”，
组件：{
一，
B
}
}
/脚本
3. 实现效果
可以看到，组件A中显示的数据，组件B中添加和修改的数据，都是通过数据共享进行数据通信，简单存储模式就是这样一种应用模式。
这就是如何理解Vue简单状态管理的商店模式的细节。更多关于Vue简单状态管理的商店模式，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。