Vuex 个人学习记录 持续更新

 注：红色加粗为个人重点，！代表面试可能会问到

1. 了解Vuex

Vuex 应用的核心就是 store（仓库）。

Vuex 是一个Vue项目开发时使用的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 ！

场景：多个组件共享数据或者是跨组件传递数据时 ！

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

Vuex 和单纯的全局对象有以下两点不同：

>>> Vuex 的状态存储（state）是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

>>> 不能直接改变 store 中的状态（state）。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具(VueVeptools)帮助我们更好地了解应用。

2. 安装与使用

npm i vuex -s
// npm install vuex --save

 >>> 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

>>> 全局注册

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)
})

>>> 使用

// 标签中使用
<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.name }}</h1>
    </div>
</template>


// 在方法中使用
...,
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
...

3. Vuex 基本成员（属性/对象）！

state 存放状态（data）

getters 可以理解为state的计算属性，加工state成员。我们在组件中使用 $sotre.getters.fun()

mutations 修改状态，并且是同步的。在组件中使用this.$store.commit('',params)

actions 异步操作。在组件中使用是this.$store.dispath('')

modules store的子模块，为了开发大型项目，方便状态管理而使用的

工作流如下：

4. 概念详解 （概念、应用、面试问答）

>>> state

单一状态树

Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态，作为一个“唯一数据源”存在。即，每个应用仅包含一个 store 实例。

在 Vue 组件中获得 Vuex 状态

uex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

// 首先应在根实例中注册store


computed: {
    count () {
      return this.$store.state.name  // name 即为存储在state中的状态
    }

mapState 辅助函数

import { mapState } from 'vuex'

// ···

computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 映射 this.count 为 store.state.count,计算属性名称与state子节点名称相同时
    //'count'

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    },

    
  })

对象展开运算符 ... [暂不详述]

 >>> getters

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

state 当前VueX对象中的状态对象

getters 当前getters对象，用于将getters下的其他getter拿来用

getters:{

    nameInfo: (state) => {
        return "姓名:" + state.name
    },
    //nameInfo(state) {
    //    return "姓名:" + state.name
    //},

    fullInfo: (state,getters) => {
        return getters.nameInfo + '年龄:' + state.age
    }
    //fullInfo(state,getters) {
    //   return getters.nameInfo + '年龄:' + state.age
    //}  
}

// 使用
computed: {
  fullInfo() {
    return this.$store.getters.fullInfo
  }
}

getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

 [累了，今天就更新到这吧...]