store内部数据调用 与 view使用store数据_store调用接口在哪个函数中写

这篇文章主要说一下vuex中数据处理的几点：

（1）store内部数据调用

1. vuex action调用另一个action

2. action调用mutations

3. action调用外面的方法

---

主要用途：
在表单数据 增加，删除，保存，更新以后 重新刷新里面

例如上图，修改权限 和 删除完成以后需要重新更新列表里面的数据~

代码演示

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
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

---

store（数据处理）

import {
  getChannelList,
  updateChannel,
  deleteChannel
} from '@/api/admin'

const mutations = {
  //获取列表数据
  SET_CHANNEL_LIST(state, data) {
    state.channelList = data
  }
}

const actions = {
  //获取列表数据
  GET_CHANNEL_LIST({ commit }) {
    getChannelList({
      task: 'list'
    }).then(data => {
      commit('SET_CHANNEL_LIST', data)
    })
  },
 //删除列表数据
  DELETE_CHANNEL({ dispatch }, id) {
    return deleteChannel({
      task: 'delete',
      channelid: id
    }).then(() => {
      dispatch('GET_CHANNEL_LIST')
    })
  },
 //更新列表数据
  UPDATE_CHANNEL({ dispatch }, postData) {
    return updateChannel(postData).then(() => {
      dispatch('GET_CHANNEL_LIST')
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

如果 是action调用mutations，则action 中传 { commit }，将数据转到mutations；

如果 是action调用action，则action 中传{ dispatch }, postData（这里是参数），然后在通过{ commit }将数据转到mutations；

如果发现store 数据处理代码太多，需要抽离出去，可以在与 state同级定义一个methods

如下图对时间的处理函数：

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()}`
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

（2）页面调用store数据

1.页面调用mutations

view

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

1
2
3
4
5
6
7

store

const mutations = {
  GET_TEST() {
    console.log('直接调用同步函数~')
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}
1
2
3
4
5
6
7
8
9
10
11
12

2.页面调用actions

view

 mounted() {
    this.GET_USERS_LIST()
    this.GET_TEST()
  },
  methods: {
    ...mapMutations(['GET_TEST']),
    ...mapActions(['GET_USERS_LIST']),
1
2
3
4
5
6
7

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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.页面调用const getters

getter主要用于数据在store里面 处理state里面的数据，然后直接在页面使用的情况~

view

<template>
    <div>{{ names }}</div>
    <div>{{ doneTodos }}</div>
<template>


computed: {
  ...mapState({
    names: 'mayouchen'
  }),
  ...mapGetters([
    'doneTodos'
    // ...
  ])
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

store

const state = {
  mayouchen: '马优晨',
  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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

（3）注意点

1.mutation 必须是同步函数，不可以在里面做异步数据处理；
2.接口数据，异步操作都是在action里面完成的；
3.action不能将数据传递给state，必须通过mutation 传递给state；
4.action 可以和其他action进行想换操作（如果操作存在顺序关系，可以使用async await的方式进行处理~）

希望伟大的祖国繁荣富强~