Vuex 的基本使用、五大核心、辅助函数以及持久化插件(vuex-persistedstate)

Vuex 的基本使用

当我们创建项目时配置脚手架可以直接选择vuex，这样后期不用我们自己配置vuex，如果没有选择，但是我们又要用到vuex怎么办呢？

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3.创建store对象

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
  // 仓库数据本身
  state: { count: 0 },
  // 修改仓库数据的唯一方式 改变状态
  mutations: {},
  // 仓库中的计算属性
  getters: {},
  // 异步修改仓库数据 最终只能还是mutations修改仓库数据
  actions: {},
  // 模块化
  modules: {},
});

4.将Store对象挂载到vue实例中

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

vuex五大核心

1、什么是vuex？
vuex是一个专门为 Vue.js 应用设计的状态管理架构，是vue的状态管理工具，统一管理和维护各个vue组件的可变化状态，也就是说vuex就是一个存放公共数据的仓库

2、vuex有五个核心概念
state：vuex的基本数据，用来存储需要变更的变量。
geeter：可以理解为store的计算属性。
mutations：用来修改提交store中的数据，每个mutation斗鱼一个字符串的时间类型（type）和一个回调函数（handler），这个回调函数就是需要实际进行状态修改的地方，但是前提是不许要是同步（如需异步操作可用到actions）
action：action提交的是mutation，不能直接变更状态，action可以包含任意异步操作
modules：将vueX中的store进行模块化，使每个模块都拥有自己的的state、mutation、action、getter。

vuex中的辅助函数

vuex官方给我们提供了一系列辅助函数来简化我们的代码，也就是 {mapState, mapMutations, mapActions, mapGetters},使用这些函数会让我们的代码更简洁

注：

• mapState，mapGetters返回的是属性，所以混入到 computed 中
• mapMutations，mapActions返回的是方法，只能混入到methods中

<template>
  <div>
    <div>
      <h3>{{ log }}</h3>
    </div>
    数量<span>{{ number }}</span> <br />
    <el-button type="success" @click="add">+</el-button>
    <el-button type="info" @click="jianj">-</el-button>
  </div>
</template>

<script>
import { mapState, mapMutations} from "vuex";

export default {
  name: "",
  props: [],
  components: {},
  data() {
    return {
      // num:999,
    };
  },
  methods: {
    //数组
    // ...mapMutations(["addNum","jian"]),
    //对象
    ...mapMutations({ add: "addNum", jianj: "jian" }),
    
    //老套方法
    // addfn(){
    //   this.$store.commit("addNum")
    // },

    // addjian(){
    //   this.$store.commit("jian")
    // }
  },
  mounted() {},
  watch: {},
  computed: {
    //对象
    ...mapState({ number: "num", log: "log" }),
    //字符串
    // ...mapState(["log","num"]),

    // log() {
    //   return this.$store.state.log;
    // },
  },
};
</script>

<style scoped>
div {
  text-align: center;
}
</style>

vuex中使用

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[],
    login:{},
    log:'我是一句话',
    num:100,
  },
  mutations: {
    //点击加加
    addNum(state){
      state.num ++
    },
    //减减
    jian(state){
      state.num --
    },
  },
  actions: {

  },
  plugins: [
    new persist({
        storage: window.localStorage,
    }).plugin,
]
})

本地存储持久化插件(vuex-persistedstate)解决刷新数据消失的问题

页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex就可以被应用了。

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，
这时候我们可以使用插件-vuex-persistedstate做到数据持久化，这个插件会帮助我们把state里的数据存进本地存储中

使用方法如下所示

1、安装本地存储（持久化插件）

npm i vuex-persist --save

2、在store下的index.js中引入

import persist from "vuex-persist";

3、设置插件配置 跟state同一级的地方设置如下代码

plugins: [
    new persist({
        storage: window.localStorage,
    }).plugin,
],