vuex 探析

1： vuex 探析

Vuex 是什么？

1：Vuex 是一个专门为vue.js 应用程序开发的管理状态。 状态管理模式
 它采用集中存储式管应用管理所有的组件的状态, 并且以相应规则保证可预测的方式发生变化。

2: 状态管理模式: 状态管理工具,  集中式存储管理

  2.1:  可以理解为: 需要将多个组件共享的全部变量存储在一个对象里边。
  2.2:  将这个对象放在顶层的Vue 实例中，让其他组件可以使用。
 
3: vue 显示原型  ===> 在vue的原型上挂载顶级对象。   并且vuex 还是响应式的。 
   vue.js 最大的便利就是响应式。  vuex: 就是提供了这样的一个组件共享状态的插件。

4: 有什么状态时, 我们需要在组件之间的共享

  4.1: 比如登录状态,  用户名称, 头像，地理位置信息。
  4.2: 商品收藏， 购物车中的信息

  4.3: 这些信息放在同一个地方进行保存要和管理。

5: vuex 是做什么的？ 在项目中是做什么的？

6： 单页面状态管理:  单页面状态管理:  单页面状态管理工具:  View: 视图区域  ==> 对应template 模板 
 区域  State: 状态管理工具  Action: 行为区域  js 交互区域。 
变量用来保存状态, 就是定义data 里边的数据,  Action: 交互逻辑。  比如： 按钮点击事件


7:  要使用vuex:  就是要安装vuex, 使用npm install vuex --save
   7.1: vuex 是一个插件， 就需要使用 vue.use() 安装插件。
   7.2: vuex 可以在main.js 中引入,  另外安装到vue上 但是不建议使用。
        否则main.js 相对较大一些
   7.3: 我们可以新建一个文件夹store 文件,  index.js 文件中引入vue, 然后引入vuex 
       然后挂载到vue 实例上, 
----------------------------------------------------------------------------
1： import Vue from 'vue'
2: import Vuex from 'vuex'

import user from './module/user'
import app from './module/app'

// 1: 安装插件
3: Vue.use(Vuex);  使用use 方法:  其底层就是执行了install 方法

和创建路由的方法的差不多,  new Vuex.Store 创建实例对象,  并不是new Vuex
 而是new 出来Vuex 中Strre 属性。 
4: export default new Vuex.Store({
    state: {
    //
    },
    mutations: {
    //
    },
    actions: {
    //
    },
    modules: {
        user,
        app
    }
})
5: 然后在main.js 中引入  ===>  Vue.prototype.$store = store;
   可以在每一个组件上使用, 


   然后挂载到 new Vue 是实例对象上, 
   new Vue({
    el: '#app',
    router,
    data: function () { //设置未读消息全局变量
      return {
      UNReadMsgNum: 0,
     }
    },
    i18n,
    store,
    render: h => h(App),
    mounted() {
      // initRouter() // 新增 调用方法,动态生成路由,
    }
})
------------------------------------------------------------------------------
Store: 中固定放5个属性:  
  (1): state: {   // state  就是保存状态的地方 
    // 定义需要共享的数据   //  状态管理的地方
    counter: 10
  }
   // mutations 中定义修改state 中的数据
  (2): mutations: {   //  
     // 定义方法
     increment(satet) {
       state.counter++
     }
     decrement(state) {
       state.counter--
    }
  }
  (3): actions: {   // action 进行的是异步操作,  同步提交的话在mutations 里边进行

  }
  (4): getter: {    // 类似组件中的计算属性
 
  }
  (5): modules: {   // 划分不同的模块, 对不同的模块进行相关数据报错。

  }

  state: 里边就是共享状态的,  定义状态(和变量)   都可以使用
  然后在其他组件就可以调用这个方法
  methods: {
    addtion() {
      this.$store.commit('increment');
    },
    subtraction() {
      this.$store.commit('decrement');
    }
  }
   
-----------------------------------------------------------------------
单一状态树概念:  单一数据源
vue 官方中推荐使用单一数据源,  就是有一个store对象。
就是vue中官方建议只有一个store 对象,  使用单一状态来管理应用层级全部状态。
-----------------------------------------------------------------------
getter 的理解: 就是可以理解计算属性 (全局的计算属性)
getter: {   // 类似于计算属性    需要对state 中数据进行变化修改 (加工处理数据)
  定义一个方法对 state 中数据进行处理处理
  more20stu(state) {   //  然后在每一个组件中使用$store.getters.more20stu;
    return state.students.filter(s=> s.age > 20)
  }
  
  然后再getter 中定义事件方法,  可以传递参数(第二个参数就是getters)
  然后就可以return 出去getters 中方法

  但是调用的时候需要传递一个参数
  moreAgeStu(state) {   // 在getter 中定义方法, 第二个参数是getters
     // 但是可以不用return 一个结果,  可以直接return 出去一个函数
     return function(age) {   // 直接return出去一个函数。
       return state.students.filter(s =>s.age > age)
    }
  }
}
---------------------------------------------------------------------
Mutation 状态更新
Vuex 中: store中更新状态的唯一方式:   就是提交Mutation
Mutation 主要就是包含两个部分, 
第一： 字符串事件类型 (type);
第二： 第二个是回调 (handle), 该回调函数第一个参数就是state;
muation: 定义的方式: 
mutation: {
  increment(state) {
    state.counter ++
  }
}

通过mutation 更新
increment(count) {   // 通过mutation 更新数据的时候,   第一个参数是事件名称,  第二个参数
 就是需要传递的参数,  参数与可能不是一个变量, 也与可能是一个对象。
  this.$store.commit('increment', count);
  在通过mutation 更新数据的时候,  有时候希望携带一些额外的参数
  参数被成为mutation 的载荷 (Payload);
  比如需要传递很多参数的时候, Payload 也可能是一个对象。
  这个时候就可以对象中取出相关信息。

  //  特殊提交封装
  this.$store.commit({   // 提交的是一个对象
     type="事件字符串名称";
     count: count
  })
  
}

----------------------------------------------------------------------
数组filter 方法, 如果返回的false, 就会自动过滤掉。如果返回的是: true, 就会追加到一个新的数组中。