vue-cli2使用pinia(基本使用)

关注

原创 2022-07-30 13:52:39 1.3k 阅读 AI 写同款· GEO 优化 ›

Vue前端开发-Pinia模块安装与配置 Vue Pinia是一个专门为Vue 3设计的状态管理库，旨在提供一种简单、直观且灵活的方式来处理应用中的全局状态。阅读详情

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
// 挂载到Vue根实例
Vue.use(pinia)

new Vue({
  render: h => h(App)
}).$mount('#app')

store文件夹下的index.js

import { defineStore } from 'pinia'
import { jspangStore } from './jspang'

// 1.定义并导出容器
// 参数1：容器的ID,必须唯一，将来pinia会把所有的容器挂载到根容器
// 参数2：选项对象
// 返回值：一个函数，调用得到容器实例
export const mainStore = defineStore('main', {
    /*
    * 类似于组件的 data ，用于存储全局状态的
    * 1. 必须是函数，这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
    * 2. 必须是箭头函数，这是为了更好的 TS 类型推导
    * 
    */
    state: () => {
        return {
            count: 100,
            foo: 'bar',
            phone: '1513933888',
            xiao: '1'
        }
    },

    /*
    * 类似于组件的 computed，用于封装计算属性，有缓存功能
    */
    getters: {
        phoneHidden(state) {
            return state.phone + '你好嘛'
        }
    },
    /*
    * 类似于组件的 methods，封装业务逻辑，修改 state
    */
    actions: {
        add() {
            this.count++
        },
        getList() {
            // console.log(jspangStore().hanglist);
            this.xiao = jspangStore().hanglist
        }
    }
})

1.组件使用state数据

<template>
  <div>

    {{ mainstore.phoneHidden }}
    {{ mainstore.count }}
    {{ mainstore.xiao }}


  </div>
</template>

<script>
// 这里引入一下我们定义的容器
import { mainStore } from '../store/index'
export default {
  data() {
    return {
      name: "小李",
      info: {
        hobby: "网站",
      },
      // 看这里，把这个引入的函数赋值给data里的值
      mainstore: mainStore()
    };
  }
};
</script>

<style>
</style>

2.组件使用actions数据

<template>
  <div>
	<button @click="clickButton()">触发actions函数<button>
  </div>
</template>

<script>
// 这里引入一下我们定义的容器
import { mainStore } from '../store/index'
export default {
  data() {
    return {
      name: "小李",
      info: {
        hobby: "网站",
      },
      // 看这里，把这个引入的函数赋值给data里的值
      mainstore: mainStore()
    };
  },
  methods:{
  	// 我们在actions定义add函数
  	clickButton(){
  		this.mainstore.add()
  	}
  }
};
</script>

<style>
</style>