Vuex的使用以及持久化的实现（2.0版本）

什么是 vuex ？这里不进行过多介绍，请直接看官网

Vuex 是什么？ | Vuex (vuejs.org)

Vuex 主要有四部分：

　　1. state：包含了 store 中存储的各个状态。

　　2. getter：类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。

　　3. mutation：一组方法，是改变store中状态的执行者，只能是同步操作。

　　4. action：一组方法，其中可以包含异步操作。

源码代码在文章的最下方（注意： 首次运行本项目时,请先输入命令： npm install ，进行安装对应的模块依赖）

1、假设你的项目已经建好，并且也已经安装了 Vuex ....

2、在 src 目录中新增一个名为 store 的文件夹，我的项目结构如下：

3、在 store 文件夹中新增 index.js 文件

内容如下（ require.context('./modules') 这个 modules 怎么来的在第4个步骤有说明 ）

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

// 批量自动导入 自定义不同的vuex模块
let modules = {}

// 在 modules当前目录中 找出所有以 .js 结尾的文件
const files = require.context('./modules', false, /\.js$/);
files.keys().forEach(key => {
    modules[key.replace(/(\.\/|\.js)/g, "")] = files(key).default;
})
Object.keys(modules).forEach((key) => {
    // 使其成为带命名空间的模块。
    // 保证在变量名一样的时候，添加一个父级名拼接
    modules[key]["namespaced"] = true;
});
// 以下的结果为：
/**
 *
 *   {
 *       "storeDemo1": { 第一个模块
 *          "namespaced": true,
 *          "state": {
 *              "aFlag": false
 *           },
 *       },
 *       "storeDemoN.." : { 第 n 个 模块
 *           "namespaced": true,
 *           "state": {
 *              "N..Flag": false
 *           },
 *       }
 *   }
 */

const store = new Vuex.Store({
    modules
})
export default store;

View Code

4、在 store 文件夹中新增 modules 文件夹，然后再 modules 文件夹新建一个 storeDemo1.js 文件

storeDemo1.js 内容如下

/**
 * 数据源
 */
const state = {
    aFlag: false,
    msg: 'oukele',
}

/**
 * 在mutations中写上自定义的方法，
 * 然后在组件的js中通过 this.$store.commit("自定义的方法名")
 * 可以更新 store(即上方定义的 state对象 的属性值) 中的数据和状态
 *
 * 注意：mutations 必须是同步函数 ( 因为在 mutations 中导致任何数据源状态变更都应该在此刻完成 )
 * 官方解释：在 mutation 中混合异步调用会导致你的程序很难调试。
 *         例如，当你调用了两个包含异步回调的 mutation 来改变状态，
 *         你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。
 *         在 Vuex 中，mutation 都是同步事务
 *
 * 为了处理异步操作，请使用 Action
 */
const mutations = {

    /**
     * 更改 state 中 aFlag 的值 方法
     * @param state 数据源对象
     */
    changeAFlag(state){
        state.aFlag = true;
    },

    /**
     * 更改 state 中 msg 的值 方法( 可以传递自定义参数 ) + 本地持久化
     * @param state 数据源对象
     * @param params 传递的自定义参数
     * @param isEndurance 是否本地持久化
     */
    changeMsg(state , params , isEndurance){
        // DOTO
        // 等会再完善
        console.log( state , params + " - " + isEndurance )
    }
}

/**
 * store 中定义“getter”（可以认为是 store 的计算属性）
 * Getter 会暴露为 store.getters 对象，你可以以属性的形式访问 state(数据源中的) 这些值
 */
const getters = {

    /**
     * 在外部中 可通过 this.$store.getters.getAFlag 取出 aFlag 的值
     * 注意：因为我这里使用了 模块化，所以使用时应该是这样的调用：
     *                      模块名 + 调用的函数
     * this.$store.getters['storeDemo1/getAFlag']
     *
     * @param state
     */
    getAFlag(state){
        return state.aFlag;
    },
    msg( state ){
        return state.msg;
    }
}

export default { state , mutations , getters }

View Code

5、上面的步骤都是为 Vue实例提供创建好的store ，因此使用时，需在 main.js 进行注入该 store

6、因为我是使用 vue/cli 创建的项目,创建出来的项目有一个简单的示例,我这边去除部分冗余代码

App.vue 内容如下

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Hello World"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

View Code

HelloWorld.vue 内容如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="demo-body">
      <div class="showText">

        <div>
          aFlag：{{ aFlag2 }}
        </div>

        <div>
          msg: {{ vuexMsg }}
        </div>

      </div>
      <div class="operating">
        <button @click="changeAFlag">
          操作 aFlag
        </button>
        <button @click="changeMsg(false)">
          操作 msg
        </button>
        <button @click="changeMsg(true)">
          操作 msg + 持久化
        </button>
      </div>
    </div>
  </div>
</template>

<script>

import {mapState , mapGetters} from "vuex";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  computed: {
    // 获取 vuex 的值 有以下几种方式
    // 1.
    aFlag0(){
      return this.$store.getters['storeDemo1/getAFlag'];
    },
    // 2.  使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters("storeDemo1",{
      aFlag1: 'getAFlag'
    }),
    // 也可以这样
    ...mapGetters({
      aFlag2: 'storeDemo1/getAFlag',
      vuexMsg: 'storeDemo1/msg',
      // 取出 某个 模块中的 getAFlag 函数返回的值,并且映射到 nFlag 上
      // nFlag: 'xxx/getAFlag',
    }),
    // 3.
    ...mapState("storeDemo1",{
      aFlag3:state => state.aFlag
    }),
  },
  methods: {
    /**
     * 修改存在 vuex 中的aFlag值
     */
    changeAFlag(){
      this.$store.commit('storeDemo1/changeAFlag');
    },

    changeMsg(isEndurance){
      console.log(isEndurance)
      this.$store.commit('storeDemo1/changeMsg');
    }

  }
}
</script>

<style scoped>
  .demo-body {
    width: 30%;
    margin: auto;
    display: flex;
    flex-direction: column;
  }
  .demo-body .showText {
    background-color: blanchedalmond;
    padding-top: 10px;
    height: 150px;
  }
  .demo-body .operating {
    padding: 10px 0 10px 0;
    background-color: gray;
  }

</style>