当前位置：首页 > news >正文

在Vue中使用Immutable.js

news 2025/7/6 11:20:42

在Vue3中使用Immutable.js

以下是如何在Vue.js中使用Immutable.js的步骤：

首先，需要安装immutable.js。你可以通过npm或yarn来安装：

npm install immutable

或者

yarn add immutable

在你的Vue组件中导入Immutable：

import { Map, List } from 'immutable';

使用Immutable.js的数据结构来创建你的状态：

const state = Map({todos: List([Map({ id: 1, task: 'Learn Vue' }),Map({ id: 2, task: 'Learn Immutable' })])
});

在你的Vue组件中使用这个状态：

export default {data() {return {state: state};},methods: {addTodo(task) {const newTodo = Map({ id: Date.now(), task });this.state = this.state.update('todos', list => list.push(newTodo));},toggleDone(id) {this.state = this.state.update('todos', list => {const todo = list.find(todo => todo.get('id') === id);return list.set(list.indexOf(todo), todo.update('done', done => !done));});}}
};

在你的Vue模板中使用这个状态：

<template><div><ul><li v-for="todo in state.get('todos')" :key="todo.get('id')"><input type="checkbox" v-model="todo.get('done')" @change="toggleDone(todo.get('id'))">{{ todo.get('task') }}</li></ul><input v-model="newTodo" type="text"><button @click="addTodo(newTodo)">Add Todo</button></div>
</template>

在这个例子中，我们使用了Immutable的Map和List数据结构来管理我们的待办事项列表。

当添加新待办事项或更改待办事项的完成状态时，我们更新我们的状态，并且由于Immutable.js是不可变的，这将返回一个新的状态，旧的状态将保持不变。

在Vue模板中，我们可以像平常一样使用这个状态。

在Vue3中使用Immutable.js

在Vue 3中，您仍然可以使用Immutable.js来管理使用程序的状态。

下面是在Vue 3中使用Immutable.js的步骤：

安装Immutable.js：

npm install immutable

在您的Vue组件中导入Immutable：

import { Map, List } from 'immutable';

使用Immutable.js的数据结构来创建您的状态：

const state = Map({todos: List([Map({ id: 1, task: 'Learn Vue' }),Map({ id: 2, task: 'Learn Immutable' })])
});

在您的Vue组件中使用这个状态：

import { reactive } from 'vue';export default {setup() {const state = reactive(state);function addTodo(task) {const newTodo = Map({ id: Date.now(), task });state.update('todos', list => list.push(newTodo));}function toggleDone(id) {state.update('todos', list => {const todo = list.find(todo => todo.get('id') === id);return list.set(list.indexOf(todo), todo.update('done', done => !done));});}return {state,addTodo,toggleDone};}
};

在您的Vue模板中使用这个状态：

<template><div><ul><li v-for="todo in state.todos" :key="todo.id"><input type="checkbox" v-model="todo.done" @change="toggleDone(todo.id)">{{ todo.task }}</li></ul><input v-model="newTodo" type="text"><button @click="addTodo(newTodo)">Add Todo</button></div>
</template>