问题

让我们假设我有一个Vue组件：

```javascript
import { foo } from '路径';
export default {
  data() {
    return {
      inputValue: "",
    };
  },

我如何创建一个导入的JavaScript函数，该函数接受一个inputValue，修改它，然后将inputValue的更新状态返回给Vue组件？

我尝试将inputValue作为参数传递给函数foo()，在函数内部更改其值，然后返回它，但我得到了一个undefined值。

我正在创建一个外部函数，因为修改**inputValue**只是函数的一小部分，我不希望我的代码变得混乱。

<details>
<summary>英文:</summary>

Let&#39;s say I have a vue component:

import {foo} from 'path';
export default {
data() {
return {
inputValue: "",
};
},

How can I create imported JavaScript function that takes an `inputValue`, modifies it, and then returns the updated state of the `inputValue` to the vue component?

I tried passing the `inputValue` as a parameter to the function `foo()`, changing its value inside the function, and returning it, but I got an `undefined` value.

I'm creating an external function because modifying **`inputValue`** is just a small part of the function, and I don't want my code to become cluttered.

</details>


# 答案1
**得分**: 0

我认为你应该在小型应用中使用Vue [Composables][1]，如果你的状态周围有很多逻辑，可以使用[Pinia][2]。

查看Vue文档：

- [Composables][1]
- [状态管理][3]

这是一个非常简单的示例：

```javascript
const { createApp, ref } = Vue;

const useStore = (value) => {
    const input = ref(value);
    const add = () => input.value++;
    return { input, add };
}

const App = {
    setup() {
        const { input, add } = useStore(1);
        return { input, add };
    }
}

const app = createApp(App);
app.mount('#app');

#app {
    line-height: 2;
}

[v-cloak] {
    display: none;
}

<div id="app">
    <input type="number" v-model="input" /> <button @click="add()">+1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

const { createApp, ref  } = Vue;

const useStore = (value) => {
    const input = ref(value);
    const add = () => input.value++;
    return { input, add }
}

const App = {
  setup() {
    const { input, add } = useStore(1);
    return { input, add }  
  }
}

const app = createApp(App)
app.mount('#app')

#app {
  line-height: 2;
}

[v-cloak] {
  display: none;
}

<div id="app">
  <input type="number" v-model="input" /> <button @click="add()">+1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

答案2

得分: 0

你尝试过在方法上调用它吗？

methods: {
    updateInputValue() {
      this.inputValue = foo(this.inputValue);
    },
  },

更新输入的示例：

  <div>
    <input v-model="inputValue" />
    <button @click="updateInputValue">更新输入值</button>
  </div>

methods: {
    updateInputValue() {
      this.inputValue = foo(this.inputValue);
    },
  },

  <div>
    <input v-model="inputValue" />
    <button @click="updateInputValue">Update Input Value</button>
  </div>