vue3安装pinia

vue3安装pinia

在全新的Vue 3项目中安装Pinia并举行底子使用。以下是步调:

• 安装Pinia
  

在项目根目次下运行以下下令:

1. npm install pinia

复制代码

• 在main.js中设置Pinia
  

打开main.js文件,添加以下代码:

1. import { createApp } from 'vue'
2. import { createPinia } from 'pinia'
3. import App from './App.vue'
5. const app = createApp(App)
6. const pinia = createPinia()
8. app.use(pinia)
9. app.mount('#app')

复制代码

• 创建一个Store
  

在src目次下创建一个stores文件夹,然后创建一个新文件,比方counter.js:

1. import { defineStore } from 'pinia'
3. export const useCounterStore = defineStore('counter', {
4.   state: () => ({
5.     count: 0
6.   }),
7.   actions: {
8.     increment() {
9.       this.count++
10.     }
11.   },
12.   getters: {
13.     doubleCount: (state) => state.count * 2
14.   }
15. })

复制代码

• 在组件中使用Store
  

在任何Vue组件中,您可以如许使用刚创建的store:

1. <template>
2.   <div>
3.     <p>Count: {{ counterStore.count }}</p>
4.     <p>Double Count: {{ counterStore.doubleCount }}</p>
5.     <button @click="counterStore.increment">Increment</button>
6.   </div>
7. </template>
9. <script setup>
10. import { useCounterStore } from '../stores/counter'
12. const counterStore = useCounterStore()
13. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金