前言
几种本地存储的方法
1.localstorage ： 真正的本地持久化存储，存放数据大小为一般为5MB，只能手动删除，而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
2.sessionStoreage： 临时存储 ，会话结束时存储的内容就会清除
3.cookie： 浏览端客户端存储少量数据的一种技术，存储时间为窗口或浏览器关闭，存放数据大小为4K左右 ，存储于你电脑上的文本文件中。
4.vuex 集中式状态管理
一、什么是Vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
例如：
- 用户登录状态
- 获取用户数据状态等
二、Vuex特点
1.集中式存储管理应用的所有组件的状态
2.保证状态以一种可预测的方式发生变化
3.简化Vue组件间通讯
在通常情况下，我们在一格组件去获取另一格组件的数据或数据时，都会用到组件间的传参，可能是兄弟组件，可能是父子组件，也可能是一个组件下嵌套了多个组件的情况，所以在这种情况下，去获取数据，数据交互的时候就会很麻烦，所以，我们会用到Vuex来将当前状态下的数据存储到本地，然后其他所有组件在任何地方都能去获取这个数据。
注意：在某个组件下获取到某个状态下存储的数据后，如果页面刷新的话，存储的数据会被清除；因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化
三、核心概念与原理
1.state：页面状态管理容器对象。集中存储Vue components状态数据
2. mutations：状态改变操作方法，改变state中存储的数据状态。由actions中的commit(‘mutation 名称’)来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。
3. commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
4. actions：操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。
5. dispatch：操作行为触发方法，在组件调用处执行actions中提交上去的方法；是唯一能执行action的方法。
6. getters：state对象读取方法。在组件的计算属性computed中去获取存储的数据
四、下载安装Vuex使用步骤
1.在node.js平台上去安装
vue install vuex --save
2.创建store.js文件并引入相关对象
- 在src文件夹下创建store文件夹，在store文件夹下创建store.js文件（文件名可换）
- store.js文件基本结构
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: { }
})
export default store;
3.在main.js中将vuex引入集成到Vue对象中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入store对象
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store, // 集成到vue中
render: h => h(App)
}).$mount('#app')
备注：用命令 vue cerete project在创建项目的时候，就可以去Vuex功能包，以上的操作均已被模块化完成，也不需要自己手动去创建操作了
五、Vuex具体运用案例
1.在index.js(即store.js)中操作存储状态和数据
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
/**
* state中定义状态数据，是页面状态管理容器对象，用来集中存储Vue components状态数据
*/
state: {
count: 0
},
/**
* 状态改变操作方法
* 1. 设置一个函数，并把state作为参数传进去，去操作改变状态数据
* 2. 由actions中的commit(‘mutation 名称’)，是Vuex修改state的唯一推荐方法
*/
mutations: {
ADD_COUNT(state, num) {
state.count = num;
},
MOve_COUNT(state) {
state.count--;
}
},
// 操作行为处理模块,由组件中的$store.dispatch('action 名称', data1)来触发。
/**
* 操作行为处理模块
* 1. 在组件中通过 $store.dispatch('action 名称', data1) 来触发状态改变的方法，data1为需要传进来的参数
* 2. 将然后由commit()来触发mutation的调用 , 间接更新 state
* 3. 一般在actions里面异步操作
*/
actions: {
addeCount({ commit }, num) {
commit('ADD_COUNT', num);
},
moveCount({ commit }) {
commit('MOve_COUNT');
}
},
/**
* state对象读取方法。
* 在外部组件中去获取数据和方法
*/
getters: {
total: state => state.count
}
})
export default store;
2.在外部组件demo.vue中去调用存储状态中的方法，间接改变状态数据，也可以获取状态数据
（1）在某个点击事件中去调用index.js中触发状态改变的方法，有参数也可以传参进去
this.$store.dispatch("addeCount", 10);
（2）在created钩子函数中，或计算数据computed中（通常都是计算属性computed）去获取存储数据中的数据
this.$store.getters.number;
（3）通过辅助函数去调用方法和获取数据
一下的辅助函数通常只用到mapActions和mapGetters，此时需要引入相关对象
- mapState
- mapMutations
- mapActions
- mapGetters
import { mapGetters, mapActions } from "vuex";
...mapGetters({
num: "total"
})
...mapActions({
// 此时onAdd传参需要在使用组件的地方去传参
onAdd: "addeCount",
onMove: "moveCount"
})
（4）完整代码
{{num}}
六、封装Vuex，将Vuex模块化modules
1.封装的文件夹的存放状况
2.封装的状态模块modelus和获取数据的模块getters.js以及主体index.js文件下的代码
（1）modules文件夹下的代码，示例user.js
// 将Count 暴露出去
export const Count = {
state: {
count: 0
},
mutations: {
// num为传进来的参数
ADD_COUNT(state, num) {
// 将传进来的num数据存储到本地
state.count = num;
},
MOVE_COUNT(state) {
state.count--;
}
},
actions: {
addeCount({ commit }, num) {
commit('ADD_COUNT', num);
},
moveCount({ commit }) {
commit('MOVE_COUNT');
}
}
}
（2）获取数据getters.js代码
export const getters = {
number: state => state.Count.count
}
（3）index.js下的代码
export default store;
import Vue from "vue";
import Vuex from "vuex";
import { Count } from "./modules/count";
import { getters } from "./getters";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
// 这里是名称值对的缩写 Count: Count
Count
},
getters: getters
})
export default store;
（4）在外部组件调用改变数据状态的方法和获取数据的方法
- 传值进来，改变存储的数据状态
// 10为参数，传到vuex中的actions处去
this.$store.dispatch("addeCount", 10);
- 获取存储状态中的数据
// 从vuex中 $store.getters 获取count的值
this.$store.getters.number;