pinia使用 vue2

引用中的内容是关于在Vue2中使用Pinia的安装步骤和引入方式。首先，需要安装Pinia和@vue/composition-api依赖。使用以下命令进行安装：

cnpm i pinia @vue/composition-api --save

然后，在main.js文件中引入Pinia和PiniaVuePlugin，并创建Pinia实例，将其挂载在Vue实例上，示例如下：

// 引入pinia
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()

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

引用中的内容是关于在Vue2中使用Pinia的模板使用方式。可以直接在template中使用Pinia提供的状态和方法。示例如下：

<template>
  <div>
    <fieldset>
      <legend>{{ this.obj.comp }}
        <button @click="this.obj.increment">{{ this.obj.counter }}</button>
      </legend>
    </fieldset>
  </div>
</template>
<script>
// 导入 pinia 实例
import useMainStore from '../storeioen'

// 实例化容器
const mainStore = useMainStore()

export default {
  data() {
    return {
      id: ''
    }
  },
  mounted() {
    this.obj = mainStore
    console.log(this.obj)
  }
};
</script>

引用中的内容是关于在Vue2中使用Pinia的storeToRefs方法。storeToRefs方法可以将Pinia的状态转换为响应式的ref，并将其导出供模板使用。示例如下：

<script>
import { mapState, mapActions, storeToRefs } from 'pinia'
import storeId from '../storeioen' //storeId就是导出的那个值
const ustoreId = storeId() //实例化容器
console.log(ustoreId)
const { counter } = storeToRefs(ustoreId) //这样使用

export default {
  data() {
    return {
      id: ''
    }
  },
  methods: {},
  computed: {},
  mounted() {
    this.id = counter // 但是这样出来的值会变成一个对象，值的键为值，使用时需要注意
  }
};
</script>