我要评论vue3+ts使用pinia(vue-lic搭建项目)
1、安装
npm install pinia -s
2、pinia初始化
//在store目录下新建多个.ts文件（为了便于模块化和更好维护）
//index.ts
import { manage } from './backstagemange';
export { manage };
//manage.ts
import { definestore } from 'pinia';
export const manage = definestore('managestore',{
state: () => {
//状态
return {
person: {
name: 'pinia',
age: 0,
say: 'woc'
},
reason: '我爱前端',
}
},
getters: {
//计算属性
},
actions: {
//异步操作
},
});3、在main.ts中注册使用
import { createapp } from 'vue';
import { createpinia } from 'pinia';
import app from './app.vue';
const pinia = createpinia();
const app = createapp(app);
app.use(pinia);
app.mount('#app');4、在.vue的setup中使用
这里我只展示state的使用，getters和actions的使用请转弯到官方网址查阅。
<script lang="ts">
import { definecomponent } from 'vue';
import { manage } from '@/store';
export default definecomponent({
setup() {
const store = manage();
...
//store.person就可以拿到person这个对象
//也可以直接把store直接return出去在template中使用
//更改store状态
//第一种方式，更灵活可以做一些其他的逻辑
store.$patch((state: any) => {
...
state.person['name'] = '益达';
});
//第二种方式,只能直接更改某个状态
store.$patch({
reason: '我更爱前端了！', //这里也可以写一个表达式，比如前面有一个变量赋值给reason，hobby ? hobby : '我更爱前端了！'
})
}
})
</script>5、在ts文件中使用状态
import { manage } from '../store';
export function updateaside() {
const store = manage();
....
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论