概述
store 状态管理模式的实现思想很简单,就是定义一个 store 对象,对象里有 state 属性存储共享数据,对象里还存储操作这些共享数据的方法。在组件中将 store.state 共享数据作为 data 的一部分或全部,在对 store.state 对象里的共享数据进行改变时,必须调用 store 提供的接口进行共享数据的更改。
以下以一个简单 todo-list demo 来介绍 store 状态管理模式
1. 定义 store.js
//store.js export const store = { state: { todos: [ {text: '写语文作业', done: false}, {text: '做数学卷子', done: false} ] }, addtodo(str){ const obj = {text: str, done: false} this.state.todos.push(obj) }, setdone(index){ this.state.todos[index].done = true } }
2. 组件使用 store.js
//a.vue <template> <div class="a"> 我是 a组件 <ul> <li v-for="(todo,index) in todos" :key="index" :class="todo.done?'done':''" @click="setdone(index)"> {{todo.text}} </li> </ul> </div> </template> <script> import {store} from '../store/store.js' export default { name: 'a', data(){ return store.state }, methods: { setdone(index){ store.setdone(index) } } } </script> <style scoped> .a{ background: red; color: white; padding: 20px; } .a li.done{ background: green; } </style>
//b.vue <template> <div class="b"> <div> 我是 b 组件,在下方输入框输入任务在 a组件 中添加任务 </div> <input type="text" v-model="text"> <button @click="addtodo">add todo</button> </div> </template> <script> import {store} from '../store/store.js' export default { name: 'b', data(){ return { text: '' } }, methods:{ addtodo(){ if(this.text){ store.addtodo(this.text) } } } } </script> <style scoped> .b{ background: yellow; padding: 20px; } </style>
//app.vue <template> <div id="app"> <a /> <b /> </div> </template> <script> import a from './components/a.vue' import b from './components/b.vue' export default { name: 'app', components: { a, b } } </script>
3. 实现效果
可以看到,在 a组件 中显示的数据,在 b组件 中进行添加和修改,就是通过数据共享的方式进行数据通信,简单的 store模式 就是这样的运用方式。
以上就是如何理解vue简单状态管理之store模式的详细内容,更多关于vue简单状态管理之store模式的资料请关注www.887551.com其它相关文章!
黄山市民网:https://www.huangshanshimin.com/