Vuex的基础知识

==============================================================================
Talk is cheap，Show me the code（来自Linus）

父数据传进子数据：props：{}

把vuex的代码用重新创建的文件夹store（仓库的意思）来装，再创建一个文件index.js

vuex作用：
1、可以进行集中式储存管理，或者是状态管理模式、
2、用vuex进行管理是可以做到响应式的，响应式就是当数据改变时，页面会自动刷新
3、并不是所有数据或状态都放进vuex里面进行管理，
4、当数据或状态需要多组件共享的时候才放进去，或者是层级关系比较复杂的时候需要放进去

---

单界面到多界面状态管理切换：

---

官方关于Vuex管理的图例：
1、不能在components里面直接修改State（状态的意思）的值要按下面步骤来修改
2、假如直接修改State的话会绕过Devtools这个浏览器插件，这个插件可以记录每一次传输数据或状态的情况，有他做记录方便后面维护的时候，知道哪一步传输的时候出现错误，如果绕过这个插件会导致后期排除错误的时候异常艰难
3、Actions里面是进行异步操作的，Mutations（转变的意思）里面是进行同步操作的，Devtools插件也只能记录同步操作

Backend（后端的意思）
frontend（前端的意思）

---

使用vuex进行集中式数据管理：
要先安装浏览器插件：vue devtools

app.vue代码：

<template>
  <div id="app">
  <h2>------------------app内容-----------------</h2>
  <h2>{{$store.state.counter}}</h2>//要使用$store.state.counter来获取vuex里面的共享数据
  <button @click="counteradd">+</button>
  <button @click="countersub">-</button>
  <h2>------------------hellovuex内容-----------------</h2>
  <hellovuex/>
  </div>
</template>

<script>
import hellovuex from './components/hellovuex'
export default {
  name: 'App',
  components:{
    hellovuex
    },
    methods: {
      counteradd(){
        this.$store.commit('increment')//通过提交mutations来实现调用方法
      },
       countersub(){
        this.$store.commit('decrement')
      },
    },
  data(){
    return{
    }
  }

}
</script>

<style>

</style>

main.js代码：

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

Vue.config.productionTip = false
// vue.prototype.$store=store挂载的时候相当于执行了这一步，在原型上添加，所有人都可以有$store这个方法
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,//挂载store
  render: h => h(App)
}

store里面的index.js代码：

import vue from 'vue'
import vuex from 'vuex'

//1、安装插件
vue.use(vuex)
 
//2、创建对象
const store=new vuex.Store({
    state:{
          counter:1000           
    },
    mutations:{//里面放方法，注意mutations要加s
        increment(state){
            state.counter++
        },
       decrement(state){
            state.counter--
        }
    }

})
//3、导出对象
export default store

=================================================================================================

vuex-state单一状态树的理解：
vuex五大核心概念：
1、State
2、Getters ----类似计算属性
3、Mutation
4、Action
5、Moudle

单一状态树也叫单一数据源：就是一个项目里面只使用一个store来储存所有需要共享的状态信息

=================================================================================================

vuex-getters的使用方法：
filter()过滤方法，里面的s装着students，通过箭头函数来进行判断自定义的规则就像 “>20”

1、当需要将state中的状态信息进行修改后才获取的话，
可以先在getter里面定义方法，处理完之后在外面通过$store.getter.自定义方法名来获取

2、传递参数，还可以传getters参数：

3、当需要传入自定义参数时需要在getters的函数里面返回一个函数：

===============================================================================================

vuex-mutations的携带参数：
可以传普通参数，也可以传对象

放在store的index.js的mutations的方法里面：

放在app.vue的methods的方法里面：

---

vuex-mutations不同的提交封装：
！！！当你以第二种特殊风格提交封装的时候，直接写变量名时会有影响的，
！！！当他去到mutations里面调用的时候，传进去的不再是一个变量，而是一个对象，也可以说是一个payload（载荷/负载）

app.vue中的methods：

store中的index.js中的mutations：

调用的方法：

=================================================================================================

vuex的响应式原理：

1、每个属性的背后都会有一个watcher 用来观察它是否有变化
2、想后续把状态信息添加到state上的话需要用到两个方法：
写在mutations的自定义函数里面
vue.set（对象，key，value）
vue.delete（对象，key，value*可选）
3、每一次调用都需要在.vue文件的方法里面进行commit提交才能调用mutations的方法

---

vuex-mutations的类型常量：

1、当导出的对象的时候export后面没有default的话，不能直接使用import导入
2、要使用import { } from ‘文件路径’ 导入
3、新建一个文件来对mutations的方法名字做一个统一管理，把mutations里面的方法名写成常量
4、无论是哪里使用都要先提前导入文件，而且是用import { } from ‘文件路径’ ，因为不是default

在store文件夹里面自定义统一管理名称的文件：

app.vue：

store里面的mutations：
使用常量要加 [ ]

================================================================================================

vuex-actions的的使用详解：

补充：在mutations里面不要进行异步操作，它不会更新内部的state状态信息
           因为devtools不能很好地追踪这个操作什么时候完成

！！actions于mutations类似但是actions可以处理异步请求，mutations不能

1、dispatch发布：在使用actions的方法的时候要使用dispatch而不是commit管理图有说

2、传进的参数也不一样，是context和payload ，context相当于是$store

3、进行完actions操作后要在方法里面进行commit提交，提交的是mutations里面的方法，不然不能使用devtools进行记录

---

actions里面的函数可以返回一个promise来进行异步请求：

在app.vue的方法里面进行替换，所以then（）是写在app.vue的方法里面：

===============================================================================================

vuex-modules的使用详解：
modules里面也有五大核心，只是modules核心很少再嵌套

1、模块内的state核心：

index.js：

app.vue获取他的元素：

  <h2>{{$store.state.a.name}}</h2>

---

2、modules内的mutations核心：
注意事项：
1、模块的mutations里面的方法名不要起跟root_mutations的方法名一样
2、payload是载荷用于传自定义值
3、只要是提交到mutations就只需要直接commit不需要加模块名

模块中的mutations：

methods中的方法：

直接监听就行：

 <button @click="Nameupdate">修改名字</button>

---

3、modules内的getters核心：

主要的是要有return ，参数有三种state、getters、rootstate

直接通过下面的方式调用，不需要加modules名：

---

4、modules内的actions核心：
modules里面actions的context参数可以使用的属性：以下6个
具体使用：context.getters

1、modules内actions中的context只是对模块内有作用，于store内的不同，不等同于$store
2、commit仅作用于当前模块的mutations

1、一样要用dispatch来发布modules中actions内的方法来调用
2、然后modules中的actions中要commit提交modules中的mutations内的方法

app.vue中methods内定义的方法：

直接监听事件调用方法：

补充：context对象的解构写法

=================================================================================================

项目代码的重构：

关于getters核心：！！！return 后面不用加上store.
重构代码的时候排查的错误