10.Vuex

10.Vuex

vuex 可以在多个组件之间共享数据，并且共享的数据是【响应式】的，即数据的变更能及时渲染到模板

入门案例

通过vuex实现多个view间共享数据

在src/store目录下修改index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 共享数据
  state: {
    name: '',
  },
  getters: {
  },
  mutations: {

    // 修改数据
    updateName(state, newName) {
      state.name = newName
    }

  },
  actions: {
  },
  modules: {
  }
})

P1View.vue添加数据

通过this.$store.commit调用方法

<template>
    <div class="p">
        <el-input placeholder="请修改用户姓名" 
            size="mini" v-model="name"></el-input>
        <el-button type="primary" size="mini" @click="update()">修改</el-button>
    </div>
</template>
<script>
const options = {
    data() {
        return {
            name: ''
        }
    },

    methods: {
        update() {
            // sessionStorage.setItem('name', this.name)
            // 修改共享数据
            this.$store.commit('updateName', this.name);
        }
    }
}
export default options;
</script>

ContainerView.vue获取数据

通过$store.state.name插入数据

<template>
    <div class="container">
        <el-container>
            <el-header>
                <div class="t">欢迎您：{{name}}</div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
const options = {
    computed: {
        name() {
            return this.$store.state.name
        }
    }
}
export default options;
</script>

方法获取共享属性和修改方法

调用vuex中的方法都是先导入mapXxx（Vuex.Store中的属性名）

再传入要调用/使用的方法名/共享属性名

mapState方法，生成共享属性对应的计算属性，...解构到computed中

<template>
    <div class="container">
        <el-container>
            <el-header>
                <div class="t">欢迎您：{{name}}{{age}}</div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import {mapState} from 'vuex'

const options = {
    computed: {
        // 通过mapState方法，生成共享属性对应的计算属性
        ...mapState(['name', 'age'])
    }
}
export default options;
</script>

通过mapMutations方法，获取修改方法，...解构到methods中

参数在绑定click时传入

<template>
    <div class="p">
        <el-input placeholder="请修改用户姓名" 
            size="mini" v-model="name"></el-input>
            <el-input placeholder="请修改用户年龄" 
            size="mini" v-model="age"></el-input>
        <el-button type="primary" size="mini" @click="updateName(name);updateAge(age)">修改</el-button>
    </div>
</template>
<script>
import {mapMutations} from 'vuex'

const options = {
    data() {
        return {
            name: '',
            age: ''
        }
    },

    methods: {
        // 通过mapMutations方法，获取修改方法
        ...mapMutations(['updateName', 'updateAge'])
    }
}
export default options;
</script>

使调试工具不延迟展示

如果在mutations中包含异步操作，可能会导致开发工具显示不准确

将异步操作放到actions中

mutations: {

   // 修改数据
   updateName(state, newName) {
     state.name = newName
   },

   updateAge(state, newAge) {
     state.age = newAge
   },

   // 从服务器获取用户名年龄
   // 如果在mutations中包含异步操作，可能会导致开发工具显示不准确
   async updateServerName(state, user) {
     const {name, age} = user
     state.name = name
     state.age = age
   }

 },
 actions: {
   async updateServerName(context) {
     const resp = await axios.get('/api/user')
     // 通过context调用mutations中的方法
     context.commit('updateServerName', resp.data.data)
   }
 },

在调用时通过调用actions中的方法间接调用mutations中的方法

通过mapActions调用actions中的方法

<script>
import {mapActions} from 'vuex'
const options = {
    methods: {
        ...mapActions(['updateServerName'])
    }
}
export default options;
</script>