让Pinia写起来更简洁

---

前言

其实Pinia已经很简洁优雅，但是我们在组织代码结构的时候还可以再少些代码。

本文简洁之处在于通过require.context()自动化导入各个store模块，最后放在一个store对象中供其他vue文件使用。

注意 本文以Vue2为例，但与Vue3写法上无明显差别

1. 为什么用pinia

1. 模块化且按需导入,避免所有的store都被导入
2. Pinia 相对于 Vuex 提供了更简单的 API，更少的规范，以及 Composition-API 风格的 API。
3. Pinia 没有 Mutations，Actions 支持同步和异步，没有模块的嵌套结构。

2. 安装pinia

• 在Vue2中使用

npm i pinia @vue/composition-api(安装pinia和组合api) 想了解细节可参考官方安装文档

• 在Vue3中使用

npm i pinia

3. 引入pinia

项目目录

  ├── src  
	  ├── api
	  ├── assets
	  ├── components
	  ├── router
	  ├── store
		  ├── modules
		      ├── user.js
		      ├── login.js
		  ├── index.js
	  ├── views
	  ├── App.vue
	  └── main.js

在store文件夹下的index文件中引入并导出，然后挂载到vue上

/*./src/store/index.js*/

//在index文件中引入pinia，最后导出
import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
export {storeToRefs} from 'pinia'

Vue.use(PiniaVuePlugin)

const pinia = createPinia()
export default pinia

const modulesFiles = require.context('./modules', true, /\.js$/)
export const store = modulesFiles.keys().reduce((pre, cur) => {
  const moduleName = cur.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(cur);
  pre[moduleName] = value.default;
  return pre;
}, {});

---------------------------------------------------------------------------------------
/*main.js*/

import pinia from "./store";

new Vue({
  router,
  pinia,
  render: h => h(App)
}).$mount("#app");

踩坑提示: vue2中如果出现类似报错，请在vue.config.js中配置webpack

module.exports = {
  configureWebpack: config => {
    config.module.rules.push({
      include: /node_modules/,
      test: /\.mjs$/,
      type: 'javascript/auto'
    })
  }
}

4. 使用pinia

4.1 定义一个store

persist：安装pinia持久化插件支持，当然vuex也有相应的插件，有三个主要配置属性 
- key：用于存取本地存储的key值，模块相同数据会被覆盖。
- storage：存储方式，默认为localStorage
- paths：存储的属性，以数组作为集合，不支持函数形式。

/*user.js*/
------------------------------------------------------------------
import { defineStore } from 'pinia'

 //'user' 是应用程序中 store 的唯一 id，Pinia 使用它将 store 连接到 devtools。
const userStore = defineStore('user', {
  state: () => { //state：状态库、必须是函数，否则会报错。
    return {
      store_counter: 0,
      store_nameList: ['Eduardo'],
      store_obj:{age:14,gender:'男'}
    }
  },
  getters: { //getters: 计算属性，用于需要二次加工的属性,与vuex几乎无区别
    store_logName(state) {
        console.log(store_nameList)
    }
  },
  actions: { //actions: 相当于vue组件中的 methods .可以通过this访问state数据，支持异步，async、await关键字
    updateState({ data, type }) {
      this[type] = { ...this[type], ...data };
    }
  }
})

4.2 关于state的操作

1. 引用state

//store 就是sotre文件夹中导出的index
import { store, storeToRefs } from "@/store";

export default {
  setup() {
    const userStore = store.userStore();
    return {
      userStore,
      ...storeToRefs(userStore),  //从 Store 中提取所有属性同时保持其响应式
    };
  },
  methods: {},
  mounted() {
      console.log(this.store_counter)
  }
}

修改state

//方式一：直接赋值修改
this.store_counter = 0
//方式二：使用 $patch 批量赋值修改
this.userStore.$patch({
  store_counter: this.store_counter + 1,
  store_nameList: [...this.store_nameList,'张三']
})
//方式三：$patch的参数改成函数，可以部分修改数组中的元素，而非新建一个数组（对象也是一样）
this.userStore.$patch((state) => {
    state.store_counter ++
    state.store_nameList.push('张三')
})

//方式三： 触发actions中的方法

this.userStore.updateState({data:{gender:'女'},type:'store_obj'})
//这个方法的意思是更新变量，相当于this.store_obj = {this.store_obj,...{gender:'女'}}
//推荐更新对象里的属性时用这个方法

4.3 关于getters的操作

定义getters见前面的4.1 定义一个store

使用getters this.store_logName

5. 注意

推荐加上store_前缀，让同事一眼认出变量是来自于pinia。方便别人读懂你的代码