Vue状态管理模式

软件工程实践总结

这个作业属于哪个课程	2021春软件工程实践|S班
这个作业的要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	请你从个人技术学习角度和团队开发技术角度中选择你最擅长的一个相关技术，进行分析描述并总结。
其他参考文献	VueX（Vue状态管理模式)
目录 软件工程实践总结 技术概述 技术详述 技术使用中遇到的问题和解决过程 总结 列出参考文献、参考博客

技术概述

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

技术详述

• 初始化store下index.js中的内容

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

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

export default store 

• 将store挂载到当前项目的Vue实例当中去

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

• 在组件中使用Vuex
  例如在App.vue中，我们要将state中定义的name拿来在h1标签中显示

<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.name }}</h1>
    </div>
</template>

或者要在组件方法中使用

...,
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
...

技术使用中遇到的问题和解决过程

• store内的状态刷新后会重新初始化，可以通过本地存储解决，可以使用vuex-persistedstate插件，存进localStorage里
• 要使用getters方法需要将export

总结

vuex能够帮助我们方便的进行状态管理，是vue编程中不可或缺的一项技术。

列出参考文献、参考博客

VueX（Vue状态管理模式)