這篇文章主要說一下vuex中數(shù)據(jù)處理的幾點：

（1）store內部數(shù)據(jù)調用

1. vuex action調用另一個action

2. action調用mutations

3. action調用外面的方法

---

主要用途：
在表單數(shù)據(jù) 增加，刪除，保存，更新以后 重新刷新里面

例如上圖，修改權限 和 刪除完成以后需要重新更新列表里面的數(shù)據(jù)~

代碼演示

api (接口)

//列表 export function getChannelList(data) {return request({url: '/admin/channel',method: 'post',data}) } //刪除 export function deleteChannel(data) {return request({url: '/admin/channel',method: 'post',data}) } //更新 export function updateChannel(data) {return request({url: '/admin/channel?task=update',method: 'post',data}) }

---

store（數(shù)據(jù)處理）

import {getChannelList,updateChannel,deleteChannel } from '@/api/admin'const mutations = {//獲取列表數(shù)據(jù)SET_CHANNEL_LIST(state, data) {state.channelList = data} }const actions = {//獲取列表數(shù)據(jù)GET_CHANNEL_LIST({ commit }) {getChannelList({task: 'list'}).then(data => {commit('SET_CHANNEL_LIST', data)})},//刪除列表數(shù)據(jù)DELETE_CHANNEL({ dispatch }, id) {return deleteChannel({task: 'delete',channelid: id}).then(() => {dispatch('GET_CHANNEL_LIST')})},//更新列表數(shù)據(jù)UPDATE_CHANNEL({ dispatch }, postData) {return updateChannel(postData).then(() => {dispatch('GET_CHANNEL_LIST')})} }

如果 是action調用mutations，則action 中傳 { commit }，將數(shù)據(jù)轉到mutations；

如果 是action調用action，則action 中傳{ dispatch }, postData（這里是參數(shù)），然后在通過{ commit }將數(shù)據(jù)轉到mutations；

如果發(fā)現(xiàn)store 數(shù)據(jù)處理代碼太多，需要抽離出去，可以在與 state同級定義一個methods

如下圖對時間的處理函數(shù)：

const methods = {dataFormat(time) {return `${time.getFullYear()}-${time.getMonth() + 1 >= 10? time.getMonth() + 1: '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}${time.getHours() >= 10? time.getHours(): '0' + time.getHours() }:${time.getMinutes() >= 10 ? time.getMinutes() : '0' + time.getMinutes() }:${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`} }

（2）頁面調用store數(shù)據(jù)

1.頁面調用mutations

view

mounted() {this.GET_TEST()},methods: {...mapMutations(['GET_TEST'])}

store

const mutations = {GET_TEST() {console.log('直接調用同步函數(shù)~')} }export default {state,mutations,actions,getters }

2.頁面調用actions

view

mounted() {this.GET_USERS_LIST()this.GET_TEST()},methods: {...mapMutations(['GET_TEST']),...mapActions(['GET_USERS_LIST']),

store

const actions = {// 用戶列表GET_USERS_LIST({ commit }) {getUsersList({task: 'list'}).then(data => {if (data && data.length) {commit('SET_USERS_LIST', data.reverse())}})} }export default {state,mutations,actions,getters }

3.頁面調用const getters

getter主要用于數(shù)據(jù)在store里面 處理state里面的數(shù)據(jù)，然后直接在頁面使用的情況~

view

<template><div>{{ names }}</div><div>{{ doneTodos }}</div> <template>computed: {...mapState({names: 'mayouchen'}),...mapGetters(['doneTodos'// ...]) }

store

const state = {mayouchen: '馬優(yōu)晨',todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }] }const getters = {doneTodos: state => {return state.todos.filter(todo => todo.done)} }export default {state,mutations,actions,getters }

---

（3）注意點

1.mutation 必須是同步函數(shù)，不可以在里面做異步數(shù)據(jù)處理；
2.接口數(shù)據(jù)，異步操作都是在action里面完成的；
3.action不能將數(shù)據(jù)傳遞給state，必須通過mutation 傳遞給state；
4.action 可以和其他action進行想換操作（如果操作存在順序關系，可以使用async await的方式進行處理~）

希望偉大的祖國繁榮富強~

總結

以上是生活随笔為你收集整理的store内部数据调用 与 view使用store数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。