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>