vuex 用法

vuex 是什么

• vuex 是一个集中式的状态管理工具，通过vuex我们可以解决组件之间数据共享问题，后期也方便我们管理以及维护。

介绍

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	// 存放数据源  		 
	state: {},		
	// 唯一修改state的地方 
	mutations: {},
	// 执行异步操作 		 
	actions: {},
	// 模块化管理store每个模块拥有自己的 state、mutation、action、getter
	modules: {},
	// 计算state
	getters:{}   		 
})

数据持久化

• 使存储在vuex中的状态，刷新页面，不会丢失。

• 安装插件
  通过nom安装：npm install vuex-persistedstate --save
或者是 yarn add vuex-persistedstate --save

• 安装完成后在store/index.js中
  import persist from 'vuex-persistedstate'

plugins: [persist({
    storage: localStorage, // 定义数据存储的方式 值可以是localStorage 也可以是sessionStorage
    // 定义需要指定存储的数据 因为正常工作中vuex不是每一条数据都需要存储 所以我们需要指定需要存储的数据
    reducer(state) { 
    return {
       goods: state.goods
   }
 }
})]

• 或者是简单一点
  plugins:[persist()]