// 1. 导入 Vue 和 Vuex
import Vue from 'vue';

// uniapp 已默认安装，不需要重新下载
import Vuex from 'vuex';

// 2. 安装 Vuex 插件
Vue.use(Vuex);

// 3. 创建 store 实例
const store = new Vuex.Store({});

export default store;

4.2. 注册vuex

在 main.js 中注册 vuex 插件

// 导入 vuex 实例
import store from './store';
...

const app = new Vue({
  ...App,
  store // 挂载实例对象
});
app.$mount();

五、测试 vuex 是否导入成功

，可以按照模块单独配置，然后，在index.js中引入，来进行对各模块的统一状态管理

5.1. 创建搜索模块

在store文件夹下，创建modules文件夹，并在此文件夹下创建search模块（search.js）
内容如下：

export default {
  // 独立命名空间
  namespaced: true,
  // 通过 state 声明数据
  state: () => {
    return {
      msg: 'hello vuex'
    };
  }
};

5.2. 注入模块

在 index.js 中注入模块

...
// 导入 search.js 暴露的对象
import search from './modules/search';

// 2. 安装 Vuex 插件
Vue.use(Vuex);
// 3. 创建 store 实例
const store = new Vuex.Store({
  modules: {
    search
  }
});
export default store;

5.3. 页面使用模块中的数据

有3步：
导入 mapState 函数
在 computed 中，通过 mapState 函数，注册 state 中的数据，导入之后的数据可直接使用（就像使用 data 中的数据一样）
// mapState(模块名, [‘字段名’,‘字段名’,‘字段名’])
使用导入的 vuex 模块中的数据

在index.vue 中使用模块中的数据

<template>
  <view class="search-blog-container">
    <!-- 3. 使用导入的 vuex 模块中的数据 -->
    <view>{{ msg }}</view>
    ...
  </view>
</template>

<script>
// 1. 导入 mapState 函数
import { mapState } from 'vuex';
...
export default {
 ...
  computed: {
    // 2. 在 computed 中，通过 mapState 函数，注册 state 中的数据，导入之后的数据可直接使用（就像使用 data 中的数据一样）
    // mapState(模块名, ['字段名','字段名','字段名'])
    ...mapState('search', ['msg'])
  }
};
</script>

5.4. 构建 search 模块

search.js

export default {
  // 独立命名空间
  namespaced: true,
  // 通过 state 声明数据
  state: () => ({
    searchData: []
  }),
  // 更改 state 数据的唯一方式是：提交 mutations
  mutations: {
    /**
     * 添加数据
     */
    addSearchData(state, val) {
      if (!val) return;
      const index = state.searchData.findIndex((item) => item === val);
      if (index !== -1) {
        state.searchData.splice(index, 1);
      }
      state.searchData.unshift(val);
    },
    /**
     * 删除指定数据
     */
    removeSearchData(state, index) {
      state.searchData.splice(index, 1);
    },
    /**
     * 删除所有数据
     */
    removeAllSearchData(state) {
      state.searchData = [];
    }
  }
};

5.5. 对vuex数据操作

对vuex数据操作步骤：
导入mapMutations 函数，处理mutation的问题
利用 mapMutations函数，可以直接把vuex中的mutation合并到当前组件的methods中，合并之后，使用mutation就像使用methods中的方法一样

<template>
  <view class="hot-container">

    <view v-for="(item, index) in tabData" :key="index">
      {{ item.label }} - {{ index }}
    </view>
  </view>
</template>

<script>
// 1. 导入 mapState 函数
// 2. 导入mapMutations 函数，处理mutation的问题
import { mapState, mapMutations } from 'vuex';
import { getHotTabs } from 'api/hot';
export default {
  data() {
    return {
      tabData: [],
    };
  },
  // 组件实例配置完成，但是DOM尚未渲染，进行网络请求，配置响应数据
  created() {
    this.loadHotTabs();
  },
  methods: {
    // 利用 mapMutations函数，可以直接把vuex中的mutation合并到当前组件的methods中，合并之后，
    // 使用mutation就像使用methods中的方法一样
    ...mapMutations('search', ['removeSearchData', 'removeAllSearchData']),

    // 删除所有数据
    onDelAllClick() {
      this.removeAllSearchData();
    },
    //  删除指定数据 index角标
    onClearAll(item, index) {
      this.removeSearchData(index);
    },
    /**
     * 获取热搜标题数据
     */
    async loadHotTabs() {
      // uniapp 支持 async await
      const  res= await getHotTabs();
      this.tabData = res.content;
      console.log('res', res.content);
    },
  },
  computed: {
    // 2. 在 computed 中，通过 mapState 函数，注册 state 中的数据，导入之后的数据可直接使用（就像使用 data 中的数据一样）
    // mapState(模块名, ['字段名','字段名','字段名'])
    ...mapState('search', ['searchData']),
  },
};
</script>

<style lang="scss"></style>

六、vuex数据持久化

已完成数据和组件的分离，所以【数据持久化】不需要涉及到组件内的代码
用到的api是uni.setStorage，参数key value形式
案例演示：搜索模块

6.1. 搜索模块数据持久化

store/search.js

const STORAGE_KEY = 'search-list';
const HISTORY_MAX = 10;

export default {
  // 独立命名空间
  namespaced: true,
  // 通过 state 声明数据
  state: () => ({
    // 优先从 storage 中读取
    searchData: uni.getStorageSync(STORAGE_KEY) || []
  }),
  // 更改 state 数据的唯一方式是：提交 mutations
  mutations: {
    /**
     * 保存数据到 storage
     */
    saveToStorage(state) {
      uni.setStorage({
        key: STORAGE_KEY,
        data: state.searchData
      });
    },
    /**
     * 添加数据
     */
    addSearchData(state, val) {
      if (!val) return;
      const index = state.searchData.findIndex((item) => item === val);
      if (index !== -1) {
        state.searchData.splice(index, 1);
      }
      // 判断是否超过了最大缓存数量
      if (state.searchData.length > HISTORY_MAX) {
        state.searchData.splice(HISTORY_MAX - 1, state.searchData.length - HISTORY_MAX - 1);
      }

      state.searchData.unshift(val);
      // 调用 saveToStorage
      this.commit('search/saveToStorage');
    },
    /**
     * 删除指定数据
     */
    removeSearchData(state, index) {
      state.searchData.splice(index, 1);
      // 调用 saveToStorage
      this.commit('search/saveToStorage');
    },
    /**
     * 删除所有数据
     */
    removeAllSearchData(state) {
      state.searchData = [];
      // 调用 saveToStorage
      this.commit('search/saveToStorage');
    }
  }
};

6.2. 搜索api

搜索结果 - 获取搜索结果数据

import request from '../utils/request';

/**
 * 搜索结果
 */
export function getSearchResult(data) {
  return request({
    url: '/search',
    data
  });
}

6.3. 页面使用

search-result-list.vue

<template>
  <view> 搜索结果 </view>
</template>

<script>
import { getSearchResult } from 'api/search';
export default {
  name: 'search-result-list',
  props: {
    // 搜索关键字
    queryStr: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 数据源
      resultList: [],
      // 页数
      page: 1
    };
  },
  created() {
    this.loadSearchResult();
  },
  methods: {
    /**
     * 获取搜索数据
     */
    async loadSearchResult() {
      const { data: res } = await getSearchResult({
        q: this.queryStr,
        p: this.page
      });
      this.resultList = res.list;
      console.log(this.resultList);
    }
  }
};
</script>

<style lang="scss"></style>