VUEX基本介绍，包含实战示例及代码（基于Vue2.X）

VUEX

1 VUEX基本介绍

1.1 官方API

https://vuex.vuejs.org/zh-cn/

1.2 什么是vuex

vuex是一个专为Vue.js应用程序开发的状态管理模式。

1.3 Vuex使用场景

• 1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化; --> 集中式存储管理应用的所有组件的状态
• 2、如果是不同的组件，由于由于Vue.js本身组件之间有作用域，它们无法直接相互通信，所以就需要一些东西例如Vuex去集中管理和追踪它的变化；（如下案例一、案例二）

案例一：组件B 与 组件C 可以用on实现跨组件通讯 --> 缺点：性能差

component.png

实现方法

parent.png

案例二：假设当 组件D 与 组件F 实现跨组件通讯 --> 缺点：代码可读性差

component2.png

• 3、各组件间的状态同步（以及同一组件再次显示时的状态保持） --> 共享参数，一个地方更改参数，全局都会更改；

总结：1、集中式存储管理应用的所有组件的状态（集中管理数据）
     2、解决不同组件之间通信的问题、各组件状态同步

1.4 Vuex的缺点

• 1、如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex；
  （他的意思其实就是如果开发的程序并不是很庞大，一个页面中的组件不是很多并且他们之间并不需要大量频繁的互相读写操作，那么就可以直接使用传统的Vue.js中的组件Prop或者事件触发来修改状态，或者用非父子组件通信 中介绍的new一个空的Vue对象实例，并且通过事件触发等方式来跨组件通信）
• 2、vuex需要有一段时间的学习成本；

1.5 Vuex 和 本地存储 的区别

• 最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地
• 应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值
• 永久性：当刷新页面时vuex存储的值会丢失，localstorage不会
• 当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别1

1.6 安装 和 使用

    安装：
    npm install vuex --save
    
    使用：（在main.js）
    import Vuex from 'vuex'
    Vue.use(Vuex)

1.7 Vuex五个核心概念

1、State（变量定义）

    // 1） State是唯一的数据源  -->  用一个对象就包含了全部的应用层级状态
    // 2） 单一的状态树  -->  直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照
    const Counter = {
      template: '
{{ count }}
',
      computed: {
        count () {
          // this.$store：vuex对象
          return this.$store.state.count
        }
      }
    }

2、Getters（相当于计算属性 --> 对列表进行过滤并计数）

    // 1）通过Getters可以派生出一些新的状态
    const store = new Vuex.Store({
      state: {
        todos: {
          { id:1, text: '...', done: true},
          { id:2, text: '...', done: false}
        }
      },
      getters: {
        doneTodos: state => {
          // 返回是true 
          return state.todos.filter(todo => todo.done)
        }
      }
    }) 

3、Mutaions（同步操作：调用接口）

    // 1）更改Vuex的store中的状态的唯一方法是提交mutation
    const store = new Vuex.Store({
      state: {
        count:1
      },
      mutations: {
        increment(state){
          // 变更状态
          state.count++
        }
      }
    })
    
    // 运行以上方法
    store.commit('increment');

4、Actions（异步操作）

    // 1）Action提交的是mutation，而不是直接变更状态
    // 2）可以包含任意异步操作
    const store = new Vuex.Store({
      state: {
        count:0
      },
      mutations: {
        increment(state){
          // 变更状态
          state.count++
        }
      },
      actions: {
        increment(context){
          context.commit('increment');
        }
      }
    })

5、Modules（模块）

    // 1）面对复杂的应用程序，当管理的状态比较多时，我们需要将Vuex的store对象分割成模块（modules）
    const muduleA = {
      state:{},
      mutaions:{},
      actions:{},
      getters:{}
    }
    
    const muduleB = {
      state:{},
      mutaions:{},
      actions:{}
    }
    
    const store = new Vuex.Store({
      modules:{
        a: muduleA,
        b :muduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态

• actions 和 mutations的区别:

  
  
  zhihu.png

2 案例一：购物车数量、登录用户信息

2.0 码云仓库代码（欢迎Start）

码云仓库代码-https://gitee.com/hongjunyong/vue-mall-low

2.1 案例演示

shopping.gif

2.2 使用场景分析

• 多个页面会修改购物车数量，而购物车的变量应是抽离出来的state（相当于全局变量），方便其他页面修改调用
• 存储用户信息，判断用户是否登录

2.3 核心代码分析

1 main.js引用vuex

2 定义state和mutations

shopping-state.png

3 登录时调用mutations给state赋值

shopping-mutations.png

4 退出

shopping-mutations-null.png

5 修改购物车数量

shopping-mutations-add.png

6 获取state参数(两种写法)

shopping-state2.png

3 案例二：列表数据

3.0 码云仓库代码（欢迎Start）

码云仓库代码-https://gitee.com/hongjunyong/vue-webpack-todo

3.1 案例演示

todo.gif

3.2 使用场景分析

• 实时获取列表数据的最新数据（状态），只需页面一初始化调用一次列表数据，对列表的状态信息修改，无需再请求列表数据；除非重新刷新页面
• 接口请求成为全局，方便调用；

3.3 核心代码分析

1 目录结构

store.png

2 引用相应文件

store2.png

3 在actions.js写入异步请求方法接口（部分代码）

action.png

4 介绍 { commit } 与 store 两种用法

5 在mutation.js修改state的值（部分代码）

state.png

6 在state.js定义状态

state2.png

7 使用

    // - 引入mapState mapActions
    // - 调用
    ...mapState(['todos'])
    
    ...mapActions([
        'fetchTodos',
        'addTodo',
        'deleteTodo',
        'updateTodo',
        'deleteAllCompleted'
      ])

THE END