Vue状态管理

import { createStore } from 'vuex'
export const store = ({
  state(){
    return{ count:0 }
  },
  mutations:{
    increment(state){
      state.count++
    }
  },
  actions:{
    incrementActions(context){
      context.commit('increment')
    }
  }
})
//main.js:
import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'
const app = createApp(App).mount('#app')
app.use(store)

//组件中使用：
store.commit('increment')//调用mutations
store.dispatch('incrementActions')//调用actions

//可以将getters理解为全局的computed. store中定义：
{
  state:{users:{
    {id:1,name:'jery',gender:'male'},
    {id:2,name:'mary',gender:'female'},
  }},
  getters:{
    maleLength(state){
      return state.users.filter(i => i.gender === 'male').length
    }
  }
}
//使用getters:
{{$store.getters.maleLength}}//方法一

{{maleLength}}
computed:{...mapGetters(['maleLength'])}//方法二

{{newMaleLength}}
computed:{...mapGetters({'maleLength':'newMaleLength'})}//重新命名

//mutations是vuex中的操作唯一能改变state状态的函数
//且必须是同步函数(vue为了更方便的去跟踪数据状态的变化)
this.$store.state.count++ //error
this.$store.commit('xxx') //right

//使用,如何传参
mutations:{
  increment(state,payload){
    state.count += paload.newValue
  }
}
this.$store.commit('xxx',{ newValue1,newValue2,... })

//mapMutations用在methods中 
methods:{...mapMutations['increment']}

//actions主要用来做异步操作，mutations是同步
mutations:{ increment(state){...} }
actions:{
  incrementAction(context){
    setTimeout(() => {
      context.commit('increment')
    },1000)
  }
}
//模板中使用actions:
this.$store.dispatch('incrementAction')//方法一

methods:{ ...mapActions['incrementAction'] }//方法二
methods:{ ...mapActions({'incrementAction':'newName'}) }//重新命名

//定义：
{
  modules:{
    users：{ state:{...},mutations:{...} },
    foods: { state:{...},mutations:{...} },
  }
}
//访问：工作中不建议使用，定义太复杂；这里涉及到命名空间的概念
this.$store.state.user

import { defineStore } from 'pinia'
//定义名字最好用use开头，因为返回值是一个hooks
//defineStore的第一个参数是id名称，必须确保这是全局唯一的，原理部分会说明为什么
export const useOptionsStore = defineStore('optionStore',{
  state:() => {
    return{ count:0 }
  },
  getters:{
    getCount:(state) => {
      return state.count
    }
  },
  actions:{
    setCount:(newCount) => {
      state.count = newCount
    }
  }
})

import { defineStore } from 'pinia'
import { ref,computed } from 'vue' 

export const useSetupStore = defineStore('setupStore',() => {//与选项式不同，第二个参数是函数
  const countRef = ref(0)
  //ref,vue3中自定义解析和引用组件的API，允许在组件内使用ref引用组件实例，无需通过setup手动创建
  
  const getCount = computed(() => {
      return countRef
  })
  const setCount = (newCount) => {
    countRef.value = newCount
  }
  return { countRef,getCount,setCount }
})

import { defineStore } from 'pinia'
export const useSetupStore = defineStore('id',() => {})

import {
  getCurrentInstance,
  inject,
  effectScope,
  EffectScope,
  reactive,
} from "vue";
import { IRootPinia } from "./createPinia";
import { symbolPinia } from "./rootStore";

export function defineStore(options: IPiniaStoreOptions): any;
export function defineStore(
  id: string,
  options: Pick<IPiniaStoreOptions, "actions" | "getters" | "state">
): any;
export function defineStore(id: string, setup: () => any): any;
export function defineStore(idOrOptions: any, storeSetup?: any) {
  let id: string, options: any;
  if (typeof idOrOptions === "string") {
    id = idOrOptions;
    options = storeSetup;
  } else {
    // 这里就是一个参数的形式 id参数定义在对象内
    options = idOrOptions;
    id = idOrOptions.id;
  }
  // 注册一个store
  function useStore() {
    // 必须在setup中使用
    const currentInstance = getCurrentInstance();// 获取组件实例
    if (!currentInstance) throw new Error("pinia 需要在setup函数中使用");
    // 注入 pinia
    const pinia = inject<IRootPinia>(symbolPinia)!;//这里的inject与将思路第2步中的provide对应📌
    // 还没注册
    if (!pinia._s.has(id)) {
      // counter:state:{count:0}
      createOptionsStore(id, options, pinia);
    }
    // 获取store
    const store = pinia._s.get(id);
    //_s是在思路第2步中new Map()一个空对象,即用于做存储的 => 再去找如何存储思路📌createOptionsStore
    return store;
  }
  return useStore;//这里return的是个函数，本文章中搜索🤎的源码说明处
}

const createOptionsStore = (
  id: string,
  options: Pick<IPiniaStoreOptions, "actions" | "getters" | "state">,
  pinia: IRootPinia
) => {
  const { state, getters, actions } = options;//获取defineStore中对象式定义的值
  // store单独的scope
  let scope: EffectScope;
  const setup = () => {
    // 缓存 state
    if (pinia.state.value[id]) {
      console.warn(`${id} store 已经存在！`);
    }
    const localState = (pinia.state.value[id] = state ? state() : {});
    //注意这里有个判断 为state()函数调用，在选项式定义状态库中 state要return出去的原因
    return localState;
  };
  // scope可以停止所有的store 每个store也可以停止自己的
  const setupStore = pinia._e.run(() => {
    scope = effectScope();
    //effectScope返回的setup函数，收集响应过程中产生副作用的集中统一管理，如销毁状态
    //vue3官网可以搜到，日常开发不会用到，写插件可能会用到📌
    return scope.run(() => setup());
  });
  // 一个store 就是一个reactive对象
  const store = reactive({});
  Object.assign(store, setupStore);//通过Object.assign将所有对象都变成响应式
  // 向pinia中放入store
  pinia._s.set(id, store);
  console.log(pinia)
};

export interface IPiniaStoreOptions {
  id?: string;
  state?: () => any;
  getters?: any;
  actions?: any;
}