Vuex插件学习

1、定义：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（例如用户登录状态、用户管理状态）

2、 特点：

（1）集中式存储管理应用的所有组件的状态
（2）保证状态以一种可以预测的方式发生变化
（3）简化vue组件间的通讯

3、核心概念及原理

1. state：页面状态管理容器对象。集中存储Vue components状态数据

state:{
        cartList:[ ],  //购物车列表
    },

2、mutations：状态改变操作方法，由actions中的commit来触发。；
（ commit ( ‘mutation 名称’ ）；
是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。
commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

mutations:{
        //添加购物车
        ADD_CART( state,product ){
            state.cartList.push(product)
        },
        //删除商品
        DELETE_PRODUCT( state,id ){
            let index = state.cartList.findIndex(item=>item.id==id)
            state.cartList.splice(index,1)
        }
    }

3. actions：操作行为处理模块,由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。

actions:{
		//增加商品
        addCart({commit},product){
            commit('ADD_CART',product)
        },
        //删除商品
        deleteProduct({commit},id){
            commit('DELETE_PRODUCT',id)
        }
    }

4. dispatch：是唯一能执行action的方法，操作行为触发方法，（一般执行触发行为）
5. getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

核心概念与原理图形

vuex案例

案例使用

二、使用步骤

下载安装:

npm install vuex@3.4.0 --save

store.js文件建立

（也可以在store文件夹下建立其他的文件）
文件主要内容

main.js文件中引入集成

import  store  from " ./store"

集成到Vue实例中

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三、辅助函数map…

四、Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
所以Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter