Vuex相关问题

1. state：state用于存储数据和状态

2. mutations：用于修改state中的数据（但是只能同步修改数据，异步修改数据需要使用actions）

3. actions： 因为mutations只能同步修改数据，所以异步修改需要用action提交mutations

4. getters： 可以理解为store的计算属性，当我们有很多组件中都需要将store中的某个数据进行计算时，我们就可以使用getters进行统一计算后组件直接使用

4. modules：用于将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中(这样我们就可以将同步和异步方法分开存放在单独的store中)

 

一. 同步修改数据

 

1.store中

import Vue from 'vue'
import Vuex from 'vuex'
import videoModules from './videoModules'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { // state用于存储数据和状态
    name: '李四', 
  },
  mutations: { // 用于修改state中的数据（但是只能修改同步的数据，异步数据修改需要使用actions）
    SETNAMEDATA(state, data) {
      state.name = data
    }
  },
  modules: { // 用于将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中(这样我们就可以将同步和异步方法分开存放在单独的store中)
    video: videoModules
  }
})

2. 组件中

<template>
  <div class="home">
    <div>{{ this.$store.state.name }}</div> <!-- 同步更新完数据后直接该变为更改后的数据 -->
    <el-button @click="setNameData">确定</el-button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {}
  },
  methods: {
    // 同步修改vuex中的值
    setNameData() {
      this.$store.commit('SETNAMEDATA', '张三')
      console.log(this.$store.state.name) // vuex中的name就会被修改为"张三"
    }
  },
}
</script>

二. 异步修改数据

 

1.store中（放到modules中）

const modules = {
  namespaced: true, // 带命名空间(就可以通过video/...来修改和获取)
  state: {
    count: 0
  },
  mutations: {
    SETCOUNTDATA(state, data) {
        state.count = data  
    }
  },
  actions: {
    setCount({commit, state}, data) {
        return new Promise(resolve => {
            setTimeout(() => {
               commit('SETCOUNTDATA', data) // 因为state中数据只能通过mutations修改，所以我们需要重新commit调用mutations中的方法进行修改
               resolve(state.count)
            }, 2000) // 通过异步修改了state中的值，并且将异步修改后的值抛出去，
        })
    }
  }
}
export default modules

2. 组件中

<template>
  <div class="home">
    <div>{{ this.$store.state.video.count }}</div> <!-- dom也会在异步更新完数据后直接该变为更改后的数据 -->
    <el-button @click="setCountData">确定</el-button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
    
    }
  },
  methods: {
    // 异步修改vuex中的值
    setCountData() {
      this.$store.dispatch('video/setCount', 10).then((res) => {
        console.log(res)
      }) // 通过dispatch提交action异步方法，因为setCount通过resolve抛出来了修改后的值，我们就可以通过.then直接获取修改后的值
    },
  },
}
</script>