Vuex本地存储

前言

几种本地存储的方法

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）完整代码

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div>
      <h1>{{num}}</h1>
      <button @click="onAdd(10)">加1</button>
      <button @click="onMove">减1</button>
    </div>
  </div>
</template>

<script>
// import { mapGetters, mapActions } from "vuex";
export default {
  name: "Home",
  data: function() {
    return {};
  },
  // 用计算属性去监听num的值
  computed: {
    num: function() {
     // 从vuex中 $store.getters 获取count的值
      return this.$store.getters.number;
    }
   // 用mapGetters函数去获取num的值
    // ...mapGetters({
    //   num: "total"
    // })
  },
  methods: {
    onAdd: function() {
      this.$store.dispatch("addeCount", 10);
    },
    onMove: function() {
      this.$store.dispatch("moveCount");
    }
    // ...mapActions({
    //   // 此时onAdd传参需要在使用组件的地方去传参
    //   onAdd: "addeCount",
    //   onMove: "moveCount"
    // })
  }
};
</script>

六、封装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;