vuex基础学习笔记Vuex：状态管理基础概述是什么？优点创建安装创建项目时勾选安装界面运行依赖安装命令方式安装：npm

Vuex：状态管理基础

概述

是什么？

优点

创建

安装

创建项目时勾选安装

界面运行依赖安装

命令方式安装：npm install vuex --save

创建文件夹和文件vuex/store,js

store,js 导入、注册

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

Vue.use(Vuex) // 挂载到vue实例

创建并export default 一个store对象

根实例挂载 main.js

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

使用

定义（state对象）

store对象中的state定义数据

访问

第一种方式：this. $store.state.count 或者$ store.state.count

第二种方式：

修改（mutations对象）

切记：不要用访问语句this.$store.state.count直接修改

不要在mutations中执行异步操作包括定时器

作用

修改的第一种方式：直接调用
store.js定义修改+组件中触发操作

触发并传参

修改的第二种方式

先映射再调用

异步修改（actions对象）

第一种方式：触发操作

**第一种方式：**触发操作+传参

第二种方式

包装（getter对象）

gette的特点

定义

使用

案例：Todos

准备

创建项目并清理
GUI安装依赖
样式模板获取 | 📎vue-todos.txt | 使用了ant design vue 链接
样式模板复制到main.js(文件顶部内容) 和 app.vue（文件模板内容）
main.js 挂载实例对象store

列表数据

创建list.json本地接口数据文件
在异步actions中编写异步请求代码，并在mutatio中编写函数，用于触发修改state的操作
数据获取成功后，在app.vue中直接赋值给动态属性，或者通过映射的方式，映射到computed中，在文件中直接调用

输入框数据

定义state数据inputValue
映射数据到组件，并赋值给动态属性value
在mutation中创建changeData函数，
在app.vue组件的文本框监听事件函数中使用commit触发changeData函数，并传递最新的
注意：文本框监听事件如何取得文本框的值？

正确方式 changeValue(e){ this. $store.commit('changeData',e.target.value) } 错误方式使用this.$ refs.引用名称，并不能动态改变vuex中的值

实践问题记录

vuex刷新丢失

由于vuex只存在项目运行的内存中，当刷新页面时，vuex会重新进行初始化，造成store数据丢失，解决方案是配合web Storage进行中转数据，当页面创建后取出数据，在页面卸载之前存入。

export default {
  name: 'project',
  created () {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

vuex修改数据方式的繁琐

当页面数量多到一定程度时，在每个页面中修改vuex的方式颇为麻烦，此时，提供一个思路，即对store.js进行再封装，统一修改方法，并全局混入到项目中，在每个vue文件中即可使用统一的方法进行修改。

优点是一次封装，开发方便，可能存在的隐患是全局混入带来的bug风险以及再封装代码的复杂性，提高了后续开发人员的维护难度。

vuex基础学习笔记