vuex的学习心得

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
状态存储是响应式的
适用于大型的单页面应用，多人协作开发
 下载：npm install vuex
 引入：
   improt Vuex from 'vuex'
   Vue.use(Vuex);
   创建一个仓库：
    const store= new Vuex.Store({
    })
 vuex组成：
  state:状态，可以使用this.$store.state.xxx
  getters ：获取最新值，或者取值的时候做取值前的一些操作，拿到的是被操作后的值
  mutations:修改器（行为集合），用于修改state中的状态变量,唯一修改方式
  actions：动作，去触发异步后改变store值的时候，先经过actions，再由actions触发mutations
  module：模块，向store注入其他子模块，用于多人开发多模块（namespaced：是否全局）
  strict：true,代表只能通过mutations修改状态
  plugin：用于向Vuex加入运行期的插件

vuex工作流程：
1，首先会先创建一个公共的容器，存放供组件使用的公共状态
 new Vuex.store({
    state:{ //初始状态，state中存放供所有组件使用的状态
        xxx:'111'
    }
 })
 注意：组件中使用state的状态，如果使用data取值，当值再改变的时候，获取不到最新的值，
 因为data是组件初始的时候挂载完成的，不手动改data中的属性值，它的值是不会改变的，
 而state中的状态会在某个操作后改变，这个时候data中还是原来的值，
 使用computed计算属性或者watch监听变化后的值
 
 1-1:把store注入到vue根实例上
2, 组件中要使用容器中的状态
 this.$store.state.xxx

3, 组件中想要改变容器中的状态
 3-1： mutations是同步操作，不支持异步
 mutations:{
   add(state,val){//例如在mutations中添加了一个add行为，第一个形参是自动获取的state，第二个参数是获取的值
     state.xxx='222' || val;
   }
 }
  在组件中触发mutations中的add行为
  $store.commit('add',333)
  
  为什么要使用mutations修改状态？
  store里面存的是公共状态，页面中有100个组件，每一个组件都有可能改变公共状态，
  如果改变状态不经过mutations，a组件改变状态的时候让xxx=444，而b组件改变状态的时候，
  让xxx={},这个时候使用到公共状态中的xxx的组件都会受到影响，所以，要给一个规则去改变xxx，
  不能随意改，要根据一个规则改xxx的状态信息
 这是一种设计模式：如果我们以后封装了功能，也只留一个入口更改数据，不能随意改

 需求：在b中点击按钮，从服务器先异步获取数据，把获取的数据修改公共状态xxx

 3-2：actions 存放异步修改state的方法
  b去触发 actions中的f方法，f方法中异步获取数据，获取数据后，f方法中有个形参自动拿到store，
  store.commit('add') 触发mutations中的add
  页面中使用
  this.$store.dispatch('f');
 4:modules
 4-1，在模块中，state 是被限制到模块的命名空间下，需要命名空间才能访问。 
 但actions 和mutations 却没有被限制，在默认情况下，
 它们是注册到全局命名空间下的，所谓的注册到全局命名空间下，其实就是我们访问
 它们的方式和原来没有modules 的时候是一样的
  getters :就近找
 4-2，如果module中的actions和mutations 和全局中的重复命名了，就会都执行，但是操作
 的状态确是各自模块的，modules中的actions和mutations操作的是module中的state，全局
 的操作的是全局的state
 4-2-1，区分模块和全局的状态： 模块中使用namespaced:true 
     - 页面使用模块的值得时候：
       this.$store.state.模块.xxx
       this.$store.getters['模块/xxxx']
       this.$store.dispatch("模块/xx  xx", "参数")
       this.$store.commit("模块/xxxx", "参数")
 
     - 全局中，想要获取到模块中的state值：
         mutations/getters中获取state.模块名.状态
         actions中获取context.rootState.模块名.状态

     - 模块中，想要获取全局的state值：
         引入import store from './index'直接使用store.state
           

vue中是单向数据流：
1，vuex的数据传递流程也是单向的
2，props，父传子