网站建设大约要多少钱,做招聘网站赚钱吗,wordpress 导航网站模板下载,r语言网站开发文章目录 Vuex介绍使用步骤安装使用定义配置文件代码解释#xff1a; 导入到 App.vue使用使用vuex Vuex
介绍 简单来说就是#xff0c;多个组件需要共享一个data#xff0c;原本只能通过父子组件来进行#xff0c;但是vuex可以实现共享data
使用步骤
安装 npm install v… 文章目录 Vuex介绍使用步骤安装使用定义配置文件代码解释 导入到 App.vue使用使用vuex Vuex
介绍 简单来说就是多个组件需要共享一个data原本只能通过父子组件来进行但是vuex可以实现共享data
使用步骤
安装 npm install vuexnext查看我们的 pakege.json 可以发现安装是否成功 已经安装成功
使用
定义配置文件
在项目的 src 目录下创建一个 store 文件夹并在其中创建一个 index.js 或 index.ts 文件来定义 Vuex store 加入配置代码
// src/store/index.js
import { createStore } from vuex; export default createStore({ state: { count: 0, user: { name: John Doe, age: 30 } }, mutations: { increment(state) { state.count; }, updateUserName(state, newName) { state.user.name newName; } }, actions: { asyncIncrement({ commit }) { setTimeout(() { commit(increment); }, 1000); }, updateUserNameAction({ commit }, newName) { commit(updateUserName, newName); } }, getters: { doubleCount(state) { return state.count * 2; }, userAge(state) { return state.user.age; } }
});代码解释
state状态 含义state 是 Vuex 中的基本数据用于存储应用程序的状态变量。它是响应式的当 state 发生变化时依赖这些状态的组件会自动更新。 作用state 提供了应用程序中所有组件可以共享的数据源。通过将状态集中存储在 state 中可以方便地管理应用的全局状态。
mutations突变 含义mutations 是 Vuex 中唯一允许更新应用状态的方法。它们是同步函数用于对 state 进行同步修改。 作用mutations 提供了修改 state 的机制。每个 mutation 都有一个字符串类型的事件类型type和一个回调函数handler在回调函数中实际进行状态的改变。通过调用 commit 方法并传入 mutation 的类型来触发相应的 mutation。
actions动作 含义actions 类似于 mutations但用于处理异步操作。actions 可以包含任意异步代码并在操作完成后通过调用 mutations 来更新状态。 作用actions 提供了处理异步操作如 API 请求的能力。它们可以触发 mutations但不能直接修改 state。通过调用 dispatch 方法并传入 action 的类型来触发相应的 action。
getters获取器 含义getters 是 Vuex 中用于从 state 中派生出一些状态或计算属性的函数。它们类似于 Vue 组件中的计算属性但可以在全局范围内使用。 作用getters 提供了对 state 的计算或过滤功能从而可以基于 state 派生出新的状态或数据。getters 可以接受额外的参数并返回派生出的新状态或数据。在组件中可以通过 this.$store.getters.getterName 或 mapGetters 辅助函数来访问 getters。
导入到 App.vue使用
import store from ./store
app.use(store); 使用vuex
现在可以在 Vue 组件中使用 Vuex 状态、提交 mutations 和调用 actions 实例代码
template div pCount: {{ count }}/p pDouble Count: {{ doubleCount }}/p pUser Name: {{ userName }}/p pUser Age: {{ userAge }}/p button clickincrementCountIncrement/button button clickasyncIncrementCountAsync Increment/button button clickupdateUserName(Jane Doe)Update User Name/button /div
/template script
import { computed } from vue;
import { useStore } from vuex; export default { setup() { const store useStore(); const count computed(() store.state.count); const doubleCount computed(() store.getters.doubleCount); const userName computed(() store.state.user.name); const userAge computed(() store.getters.userAge); const incrementCount () { store.commit(increment); }; const asyncIncrementCount async () { await store.dispatch(asyncIncrement); }; const updateUserName (newName) { store.dispatch(updateUserNameAction, newName); }; return { count, doubleCount, userName, userAge, incrementCount, asyncIncrementCount, updateUserName }; }
};
/script然后就能成功的实现vuex数据共享了
