Pinia模块化的使用

Pinia优势

• mutations 不再存在，Actions 相当于组件中的 methods。
• 不再有 modules 的嵌套结构，但可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store
• 体积非常小，只有1KB左右。
• 良好的Typescript支持
• pinia支持插件来扩展自身功能。

Pinia模块化写法

1.统一导出

//store/user.js文件
import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: ""
    }
  },
  action:{
      SET_NAME(name) {
          this.name = name;
    },
  }
})
export default useUserStore

//store/index.js
import useUserStore from './user'

export default function useStore(){
    return {
        user:useUserStore()
    }
}

//在组件中使用
import { storeToRefs } from 'pinia'
import useStore from'/store'
// 解构需要使用 storeToRefs
const { user } = useStore()
const { name,SET_NAME } = storeToRefs(counter)
const set = ()=>{
    user.SET_NAME
}

2.单独导出

//store/user.js文件
import { defineStore } from 'pinia'
import { store } from "/@/store";
const useUserStore = defineStore('user', {
  id: "user",
  state: () => {
    return {
      name: ""
    }
  },
  action:{
      SET_NAME(name) {
          this.name = name;
    },
  }
})
export function useUserStoreHook() {
  return useUserStore(store);
}

//store/index.js
import { createPinia } from "pinia";
const store = createPinia();

export function setupStore(app) {
  app.use(store);
}

export { store };

//在组件中使用
import { useUserStoreHook } from "/@/store/modules/user";
let name = useUserStoreHook().name
const set = ()=>{
    useUserStoreHook().SET_NAME(name);
}

总结

Pinia设计理念就是想要独立各个仓库，不像vuex一样整合在一起，建议使用第二种写法