前言 全局状态管理工具
Pinia.js 有如下特点:
-
完整的 ts 的支持;
-
足够轻量,压缩后的体积只有1kb左右;
-
去除 mutations,只有 state,getters,actions;
-
actions 支持同步和异步;
-
代码扁平化没有模块嵌套,只有 store 的概念,store 之间可以自由使用,每一个store都是独立的
-
无需手动添加 store,store 一旦创建便会自动添加;
-
支持Vue3 和 Vue2
官方文档Pinia:Pinia | The intuitive store for Vue.js
1、安装方法:
yarn add pinia
npm install pinia -s
2、引入注册Vue3
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
const store = createPinia()
let app = createApp(App)
app.use(store)
app.mount('#app')
vue2中使用:
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
el: '#app',
// other options...
// ...
// note the same `pinia` instance can be used across multiple Vue apps on
// the same page
pinia,
})
3、初始化仓库Store,使用仓库中的数据
1、src下新建一个文件夹Store
2、Store/新建文件index.ts
3、index.ts中定义仓库Store
4、在App.vue中使用Test仓库
import { defineStore } from 'pinia'
// Names 枚举 是为了定义一组数据 挡在defineStore中 作为唯一的值
enum Names {
Test1='Test1'
}
// defineStore(a,b) a是给仓库绑定一个唯一的值,b是配置项,类型是对象,有三个参数 state,getters,actions
export const Test = defineStore(Names.Test1, {
state: () => {
return {
current: 1,
name:'老陈'
}
},
// 相当于一个计算属性 可以在不修改state值的情况下 对值进行一些操作
getters: {
},
//可以进行同步异步的提交
actions: {
}
})
4、在App.vue中使用Test仓库
<template>
<!-- 3、使用仓库中的数据 -->
<div>
<span> {{ testStore.current }}====={{ testStore.name }} </span>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
//1、导入pinia store
import { Test } from "./store";
export default defineComponent({
setup() {
//2、获取Test仓库中对象
let testStore = Test();
return {
testStore,
};
},
});
</script>
4、修改state中数据的五种方式
1、State 是允许直接修改值的 例如current++
<template>
<!-- 3、使用仓库中的数据 -->
<div>
<span> {{ testStore.current }}====={{ testStore.name }} </span>
<br />
<button @click="changeCurrent">修改current</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Test } from "./store";
export default defineComponent({
setup() {
let testStore = Test();
function changeCurrent() {
//1、直接修改
testStore.current++;
}
return {
testStore,
changeCurrent,
};
},
});
</script>
<style lang="less" scoped>
</style>
2、批量修改State的值
在他的实例上有$patch方法可以批量修改多个值
$patch({修改的属性1:值,修改的属性2:值})
<template>
<!-- 3、使用仓库中的数据 -->
<div>
<span> {{ testStore.current }}====={{ testStore.name }} </span>
<br />
<button @click="changeCurrent">修改current</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Test } from "./store";
export default defineComponent({
setup() {
let testStore = Test();
function changeCurrent() {
//1、直接修改
// testStore.current++;
//2、$patch 批量修改 $patch({修改的属性1:值,修改的属性2:值})
testStore.$patch({
current: 99,
name: "娃娃",
});
}
return {
testStore,
changeCurrent,
};
},
});
</script>
3、批量修改函数形式
推荐使用函数形式 可以自定义修改逻辑
<template>
<!-- 3、使用仓库中的数据 -->
<div>
<span> {{ testStore.current }}====={{ testStore.name }} </span>
<br />
<button @click="changeCurrent">修改current</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Test } from "./store";
export default defineComponent({
setup() {
let testStore = Test();
function changeCurrent() {
//1、直接修改
// testStore.current++;
//2、$patch 批量修改 $patch({修改的属性1:值,修改的属性2:值})
// testStore.$patch({
// current: 99,
// name: "娃娃",
// });
//3、使用$patch(函数形式触发)
testStore.$patch((state) => {
state.current++;
state.name += "~";
});
}
return {
testStore,
changeCurrent,
};
},
});
</script>
<style lang="less" scoped>
</style>
4、通过原始对象修改整个实例
$state
您可以通过将store的属性设置为新对象来替换store的整个状态
缺点就是必须修改整个对象的所有属性
<template>
<!-- 3、使用仓库中的数据 -->
<div>
<span> {{ testStore.current }}====={{ testStore.name }} </span>
<br />
<button @click="changeCurrent">修改current</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Test } from "./store";
export default defineComponent({
setup() {
let testStore = Test();
function changeCurrent() {
//1、直接修改
// testStore.current++;
//2、$patch 批量修改 $patch({修改的属性1:值,修改的属性2:值})
// testStore.$patch({
// current: 99,
// name: "娃娃",
// });
//3、使用$patch(函数形式触发)
// testStore.$patch((state) => {
// state.current++;
// state.name += "~";
// });
// 4、原始的$state对象操作,缺点,state中所有的熟悉必须全部修改
testStore.$state = {
current: 999,
name: "范冰冰",
};
}
return {
testStore,
changeCurrent,
};
},
});
</script>
5、通过actions修改
定义Actions
在actions 中直接使用this就可以指到state里面的值
index.ts
import { defineStore } from 'pinia'
// Names 枚举 是为了定义一组数据 挡在defineStore中 作为唯一的值
enum Names {
Test1='Test1'
}
// defineStore(a,b) a是给仓库绑定一个唯一的值,b是配置项,类型是对象,有三个参数 state,getters,actions
export const Test = defineStore(Names.Test1, {
state: () => {
return {
current: 1,
name:'老陈'
}
},
// 相当于一个计算属性 可以在不修改state值的情况下 对值进行一些操作
getters: {
},
//可以进行同步异步的提交
actions: {
//定义actions
setCurrent() {
this.current ++
}
}
})