VueX插件、持久化存储、分包module模块vuex

一、vueX

1、含义： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

2、使用场景：用户登录状态、用户购物状态

3、特点：

（1）集中式存储管理应用的所有组件的状态---存储在内存中，如果刷新页面则存储的数据消失

（2）保证状态以一种可预测的方式发生变化

（3）简化Vue组件间通讯

4、核心原理

 

5、使用步骤

 （1）下载安装: npm install vuex@4.0.2  --save  或    npm install vuex@next --save 

  （2）创建一个store文件夹，文件夹下面创建index,js文件

import {createStore} from 'vuex'

const store = createStore({
    state:{
        count:0 //状态数据
    },
    mutations:{
        PLUS(state){
            state.count++
        },
        MINUS(state){
            state.count--
        }
    },
    actions:{
        plus({commit}){
            commit('PLUS')
        },
        minus({commit}){
            commit('MINUS')
        }
    },
    getters:{
        num:(state)=>state.count
    }
})

export default store

 （3）main.js文件中集成store插件

import store from './store'
app.use(store)

（4）组件中使用store存储的值

（5）使用store存储的值的方法二：辅助函数map系列：mapState   mapMutations     mapActions   mapGetters

• 组件中引入函数     import{mapActions,mapGetters} from 'vuex'
• 获取store文件中的store状态值在computed中使用（也可以按照红色字体的方式使用）
• 

 6、持久化存储插件

（1）安装

npm i vuex-persistedstate -S

（2）store文件夹下的index.js文件中引入

import createPersistedState from 'vuex-persistedstate'

 （3）使用

import createPersistedState from "vuex-persistedstate"
const store = createStore({
    state:{
        count:0
    },
    mutations:{
        Plus(state){
            state.count++
        },
        Minus(state){
            state.count--
        },
    },
    actions:{
        plus({commit}){
            commit('Plus')
        },
        minus({commit}){
            commit('Minus')
        }
    },
    getters:{
        num:(state)=>state.count
    }，
   plugins: [createPersistedState({
      storage: window.sessionStorage,  //可改变存储方式：localStorage//没有后面代码，则是所有数据持久化存储
      reducer(state) {
          return {
          // 设置只储存state中的count
          count: state.count
        }
     }
  })]
})

7、module模块vuex

（1） 创建modeuls目录，存储vuex模块

 

 （2）index.js 引入模块通过modules集成

 （3）组件中的使用