Vue --- vuex

目录

1. vue中各个组件之间传值

   1.1 父子组件

   1.2 非父子组件或父子组件

   1.3 非父子组件或父子组件

2. Vuex

3. vuex使用步骤

  3.1 安装

  3.2 创建store模块，分别维护state/actions/mutations/getters

  3.3 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

  3.4 在main.js中导入并使用store实例

  3.5 之后按要求编码，即可使用vuex的相关功能

4. vuex的核心概念：store、state、getters、mutations、actions

  4.0 store

  4.1 state(保存数据的容器)

 4.2 getters(getXxx)

  4.3 mutations(setXxx)

  4.4 actions

5. vuex综合案例

6. actions 

7. Vuex的常用辅助函数

  7.1 mapGetters

8. Vuex的管理员Module 

附录一：Vuex进阶，store拆分即多模块状态管理(modules)篇

附录二：解决vuex数据页面刷新后初始化问题

附录三：什么是Promise

附录四：同步和异步的示例代码

同步

异步

---

1. vue中各个组件之间传值

   1.1 父子组件

   父组件-->子组件，通过子组件的自定义属性：props
   子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...);

   1.2 非父子组件或父子组件

   通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...)

   1.3 非父子组件或父子组件

   更好的方式是在vue中使用vuex  (数据管理和数据存储)

   方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。
   方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

2. Vuex

sessionstorage和localstorage的区别：

        localStorage生命周期是永久，除非用户清除localStorage信息，否则这些信息将永远存在；sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过它存储的数据也就被清空了。

   官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），
   让其在各个页面上实现数据的共享包括状态，并且可操作
   
   Vuex分成五个部分： 
   1.State：单一状态树
   2.Getters：状态获取
   3.Mutations：触发同步事件
   4.Actions：提交mutation，可以包含异步操作
   5.Module：将vuex进行分模块

3. vuex使用步骤

  3.1 安装

      npm install vuex -S

有就说明下载成功，（注意版本太高可能会用不了） 

  3.2 创建store模块，分别维护state/actions/mutations/getters

        store
        index.js        state.js        actions.js        mutations.js        getters.js

  3.3 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

      const store = new Vuex.Store({state,getters,actions,mutations})

  3.4 在main.js中导入并使用store实例

      new Vue({
            el: '#app',
            router,
            store, //在main.js中导入store实例
            components: {
                App
            },
            template: '<App/>',
            data: {
                //自定义的事件总线对象，用于父子组件的通信
                Bus: new Vue()
            }
      })

  3.5 之后按要求编码，即可使用vuex的相关功能

4. vuex的核心概念：store、state、getters、mutations、actions

  4.0 store

      每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
      const store = new Vuex.Store({
               state,    // 共同维护的一个状态，state里面可以是很多个全局状态
               getters,  // 获取数据并渲染
               actions,  // 数据的异步操作
               mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
      })

  4.1 state(保存数据的容器)

      状态，即要全局读写的数据
      const state = {
                resturantName:'飞歌餐馆'
      };

      this.$store.state.resturantName;//不建议

 4.2 getters(getXxx)

     获取数据并渲染，
     const getters = {
               resturantName: (state) => {
                         return state.resturantName;
               }
     }; 

     注1：getters将state中定义的值暴露在this.$store.getters对象中，我们可以通过如下代码访问
          this.$store.getters.resturantName

     注2：state状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：
          computed: {
                    resturantName: function() {
                              return this.$store.getters.resturantName;
                    }
          }