pinia使用

pinia优势
对vue3和ts支持更友好
体积更小

使用
装包 cnpm i -S pinia
import { createPinia } from 'pinia'
const store = createPinia()
app.use(store)
根目录新建store文件夹，创建index.ts 创建store-name.ts
store-name.ts文件中
export const enum Names {
	TEST = 'TEST'
}
index.ts文件中
import {defineStore} from 'pinia'
import { Names } from './store-name'
export const useTestStore = defineStore(Names.TEST, {
	state: () => {
		return {
			current: 1,
			name: 'xm'
		}
	},
	getters: {
	},
	actions: {
	}
})
App.vue文件中
import { useTestStore } from './store/index'
const Test = useTestStore()

在vue文件中使用
<div>
    pin:{{ Test.current }} -- {{ Test.name }}
</div>
此时devtools中会有pinia调试工具

修改store中变量的值
在使用store的页面中
修改值的几种方式
const change = () => {
  // Test.current++
  // Test.name = 'c'
  // Test.$patch({
  //   current: 888,
  //   name: '娃娃'
  // })
  // Test.$patch(state => {
  //   state.current = 300
  //   state.name = 'c'
  // })
  Test.$state = {
    current: 9,
    name: 'c'
  }
}
通过action修改
pinia的action中
	actions: {
		setCurrent(num:number) {
			this.current = num
		}
	}
修改页中
Test.setCurrent(456)

解构store store解构出来的值是非响应式的，需要借助pinia提供的api变为响应式
import { storeToRefs } from 'pinia'
const { current, name } = storeToRefs(Test)

actions使用方法 支持同步异步
pinia中 
state: () => {
		return {
			user: <User>{}
		}
	},
type User = {
	name: string,
	age: number
}
let result:User = {
	name: '飞机',
	age: 999
}
const setVal = ():Promise<User> => {
	return new Promise(res => {
		setTimeout(() => {
			res(result)
		}, 200)
	})
}
actions: {
		async setUser() {
			const res = await setVal()
			this.user = res
		}
	}
vue组件中
<div>user--{{ Test.user }}</div>
<button @click="change">++</button>
const change = () => {
  Test.setUser()
}

getters （类似计算属性，有缓存）

getters: {
		newName():string {
			return `$-${this.name}`
		}
	},
        
vue中
<div>name--{{ Test.newName }}</div>

其他api
重置到原始值
$reset
const reset = () => {
  Test.$reset()
}

pinia数据变化触发
$subscribe
Test.$subscribe((args, state) => {
  console.log('args===>', args)
  console.log('state===>', state)
})

$onAction
监听action
Test.$onAction(args => {
  args.after(() => {
    console.log('after')
  })
  console.log('args', args)
})
先走args再走回调after