上文 讲了vue2数据流转处理的方法 这文讲讲vue3
Vuex
在 Vue 3 中 可以使用 Vuex 4 来进行状态管理和存取数据。
1 创建一个 store 实例
// store.js
import { createStore } from 'vuex';
const store = createStore({
state() {
return {
data: null // 初始化数据为空
};
},
mutations: {
// 操作数据
setData(state, payload) {
state.data = payload; // 设置数据
}
},
actions: {
// 触发mutations
fetchData({ commit }) {
// 模拟异步获取数据
setTimeout(() => {
const newData = '这是新的数据'; // 模拟获取的数据
commit('setData', newData); // 调用 mutation 设置数据
}, 1000);
}
},
getters: {
//简化数据
getData(state) {
return state.data; // 获取数据
}
}
});
export default store;
2 在 main.js 中引入并挂载 store:
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');
3 在组件中访问和修改数据:
*** 在 Vue 3 中使用 Vuex 进行数据的存取和修改。state 存储数据,mutations 修改数据,actions 异步操作和提交 mutations,getters 获取数据。***
import { computed } from 'vue';
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
// 获取数据
const data = computed(() => store.getters.getData);
// 修改数据
const updateData = () => {
const newData = '这是更新后的数据';
store.commit('setData', newData);
};
// 异步获取数据
const fetchData = () => {
// dispatch 触发actions方法函数
store.dispatch('fetchData');
};
return {
data,
updateData,
fetchData
};
}
};
Pinia配置式api写法
1 创建一个 Pinia store 实例
// store.js
import { defineStore } from 'pinia';
export const useStore = defineStore('store', {
state() {
return {
data: null // 初始化数据为空
};
},
actions: {
updateData(newData) {
this.data = newData; // 更新数据
}
}
});
2 在 main.js 中引入并挂载 Pinia:
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');
3 在组件中访问和修改数据:
import { computed } from 'vue';
import { useStore } from 'pinia';
export default {
setup() {
const store = useStore();
// 获取数据
const data = computed(() => store.data);
// 修改数据
const updateData = () => {
const newData = '这是更新后的数据';
store.updateData(newData);
};
return {
data,
updateData
};
}
};
Pinia 组合式api 写法
pinia 省略了mutations操作 语法更加简洁 也是vue数据仓库的趋势
1 创建一个 Pinia store 实例
// store.js
import { createPinia } from 'pinia';
export const store = createPinia();
store.state({
data: null // 初始化数据为空
});
2 在 main.js 中引入并挂载 Pinia:
import { createApp } from 'vue';
import App from './App.vue';
import { store } from './store';
createApp(App).use(store).mount('#app');
3 在组件中访问和修改数据:
import { computed } from 'vue';
import { useStore } from 'pinia';
export default {
setup() {
const store = useStore();
// 获取数据
const data = computed(() => store.state.data);
// 修改数据
const updateData = () => {
const newData = '这是更新后的数据';
store.state.data = newData;
};
return {
data,
updateData
};
}
};
前端 提供的是一份数字化的产品 而基础便是数据
对于数据的处理确实是前端开发中重要一环