uni-app, 调用store 里的action

要调用 store 里的 action，需要先引入 store，然后使用 dispatch 方法来触发 action。

以下是一个示例代码：

// 引入 store
import store from '@/store'

// 调用 action
store.dispatch('actionName', payload)

其中，`actionName` 是你定义在 store 中的 action 名称，`payload` 是传递给 action 的参数。你可以根据需要修改这些参数。

相关问题

uni-app中使用pinia

### 如何在 Uni-app 中使用 Pinia 状态管理

#### 创建 Pinia 实例并安装

为了使 Pinia 能够工作，在项目的入口文件 `main.js` 或者对应的初始化文件中，需要先引入 Pinia 并创建其实例[^1]。

import { createApp } from 'vue'
import App from './App.vue'
// 导入 pinia
import * as Pinia from 'pinia'

const app = createApp(App)

// 创建 Pinia 实例并将它挂载到 Vue 应用实例上
app.use(Pinia.createPinia())

app.mount('#app')

这段代码展示了如何通过调用 `createApp` 方法来获取应用实例，并利用此实例上的 `.use()` 函数注册 Pinia 插件。最后一步是将应用程序挂载至 DOM 容器内。

#### 使用 Store 进行状态管理

定义 store 文件夹下的模块化存储单元可以更好地组织代码逻辑。下面是一个简单的计数器例子：

// stores/counterStore.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

上述 TypeScript 片段展示了一个名为 `counter` 的 store 模块，其中包含了初始的状态以及改变该状态的方法——即 action `increment`。

#### 访问 State 和 Actions

组件内部可以通过组合式 API 来访问这些已定义好的 store 及其属性或方法:

<template>
  <div>
    Count is {{ counter }}
    <button @click="increase">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCounterStore } from '@/stores/counterStore'

let counter = ref(0)
onMounted(() => {
  const store = useCounterStore()
  counter.value = store.count
  
})

function increase(){
  const store = useCounterStore()
  store.increment()
  counter.value = store.count
}
</script>

在这个模板里，当页面加载完成之后会自动读取当前的计数值；点击按钮则触发增加操作，并更新显示出来的数值。

使用uni-popup组件来实现弹出层的效果并在其他页面点击按钮隐藏显示调用

要在其他页面上点击按钮来隐藏或显示弹出层，你可以使用 Vuex 来实现状态管理。以下是一个示例代码，展示了如何在不同页面上通过点击按钮来隐藏或显示弹出层：

首先，在你的 uni-app 项目中安装 Vuex：

npm install vuex

然后，创建一个 `store` 文件夹，并在该文件夹下创建一个 `index.js` 文件，用于创建和管理 Vuex 的状态。

store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    showPopup: false
  },
  mutations: {
    setShowPopup(state, payload) {
      state.showPopup = payload
    }
  },
  actions: {
    setShowPopup({ commit }, payload) {
      commit('setShowPopup', payload)
    }
  },
  getters: {
    showPopup(state) {
      return state.showPopup
    }
  }
})

接下来，在需要显示弹出层的页面中，引入 `uni-popup` 组件和 Vuex 的 `store`：

your-page.vue:

<template>
  <view>
    <uni-popup :show="showPopup" @close="closePopup">
      <!-- 弹出层的内容 -->
    </uni-popup>

    <!-- 其他页面内容 -->
    <button @click="openPopup">打开弹出层</button>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import uniPopup from '@dcloudio/uni-popup'

export default {
  components: {
    uniPopup
  },
  computed: {
    ...mapGetters(['showPopup'])
  },
  methods: {
    ...mapActions(['setShowPopup']),
    openPopup() {
      this.setShowPopup(true)
    },
    closePopup() {
      this.setShowPopup(false)
    }
  }
}
</script>

在上述示例中，我们使用 Vuex 来管理 `showPopup` 的状态。在 `actions` 中，我们定义了一个 `setShowPopup` 的 action，用于改变 `showPopup` 的值。在页面中的 `openPopup` 方法中，我们调用 `setShowPopup(true)` 来显示弹出层；在 `closePopup` 方法中，我们调用 `setShowPopup(false)` 来隐藏弹出层。

在其他页面中，你可以通过点击按钮来改变 `showPopup` 的值，从而控制弹出层的显示和隐藏。只需要在点击按钮的事件中调用 `setShowPopup` action，并传递相应的参数即可。

记得根据实际情况调整代码，并确保在需要显示弹出层的页面中引入正确的组件和 Vuex 的 `store`。