如何将共享存储与Vue.js 3中的多个文件组件链接起来？

Question

我有一个Vue.js 3应用程序。这个应用程序包括多个单一文件组件。我正在试图找出如何实现最简单的全局状态管理。文档对我来说很有意义。但是，有限的文档显示了一个从多个组件的reactive函数返回的data对象。此示例假设reactive对象和组件都位于同一个文件中。我遇到的挑战是跨多个文件使用共享存储。目前我有：

• app.vue
• component-a.vue
• component-b.vue
• store.js

这些文件如下所示：

app.vue

<template>
    <div>        
      <div>How much money do you have?</div>
      <input type="number" v-model="currentAmount" />
      <br />
      <div>How much money do you want?</div>
      <input type="number" v-model="desiredAmount" />
    </div>
</template>

<script>
  import ComponentA from './component-a.vue';
  import ComponentB from './component-b.vue';

  export default {
     components: {
       ComponentA,
       ComponentB
     },

     data() {
         return {
           currentAmount: 0,
           desiredAmount: 0
         }
     },
  }
</script>

component-a.vue

<template>
    <div>        
      <div>You have {{ remainingAmount }} to reach your goal.</div>
    </div>
</template>

<script>
  export default {
     data() {
         return {
           remainingAmount: 0
         }
     },
  }
</script>

component-b.vue

<template>
    <div>        
      <div>You are {{ progress }}% of the way there!</div>
      <button @click="increaseGoal">increase goal by $10</button>
    </div>
</template>

<script>
  export default {
     data() {
         return {
           progress: 0
         }
     },

     methods: {
        increaseGoal() {
           // need to increase targetAmount by $10
           store.targetAmount += 10; 
        }
     }
  }
</script>

store.js

import { reactive} from 'vue';

const store = reactive({
  startingAmount: 0,
  targetAmount: 0
});

UI呈现。但是，很明显，数据没有在组件之间传播。我可以清楚地看到，商店和三个.vue文件之间没有任何联系。没有任何东西能把商店和UI联系起来。不过，我不知道如何正确地将store.js与三个.vue文件关联起来。

如何将共享存储与多个单个文件组件链接？请注意:我不想使用Vuex。

Answer 1

要在全局级别上获得存储，您可以将vue use()制作成vueuse()，这样就可以从VueApp中的任何组件调用this.$store。

main.js

import { createApp } from 'vue';
import store from './store/index'; // OR the path to your
import router from './router/index';
import App from './App.vue';


createApp(App).use(router).use(store).mount('#app');

我创建了一个存储文件夹，因为我在多个模块中使用该存储。在存储文件夹中是index.js，它保存基本存储和所有模块。

store/index.js

import { createStore } from 'vuex';

const store = createStore({
  modules: {},
  state() {
    return {};
  },
  mutations: {},
  actions: {},
  getters: {},
});

export default store;

通过这样做，您可以从任何组件调用存储。

component.vue

export default {
  name: 'users-list',
  created() {
    console.log(this.$store);
  },
}

存储状态中的变量不应直接更改。

该商店有三种程序。

Actions -做详细说明

这些操作用于对数据中给定的更改执行繁重的工作。在这里，您将交叉输入来自不同存储模块的函数，进行axios调用和类似的操作。因此，操作是唯一能够访问存储它的过程组。第一个论点基本上是整个商店。操作是通过调用dispatch('NameOfModule/NameOfAction', ValuetoPass)触发的。

突变-受人喜爱的设置函数

突变用于突变状态，只有突变才能使状态发生突变，以保持反应性和工作流的干净。因此，突变只能作为第一个参数传递给它们自己的本地状态。突变将由commit('NameOfMutation', ValueToPass)触发

Getters --很容易解释，不是吗？

得奖者已经习惯了，嗯，是的，去找州吧。

Answer 2

正如您所说，您不需要使用Vuex来创建全局状态。多亏了复合api，我们才能使用可合成的。

首先，创建目录/composables并添加javascript文件(创建以use word开头的文件是很好的做法) useState.js：

import { reactive, toRefs } from "vue";

const state = reactive({
  isMenuOpened: false
});

const toggleMenuState = () => {
  state.isMenuOpened = !state.isMenuOpened;
};

export default {
  ...toRefs(state),
  toggleMenuState
};

toRefs使用引用的属性将所有属性转换为普通对象。

现在您可以在vue组件中使用可组合的：

<script>
import useState from "./composables/useState";

export default {
  setup() {
    const { isMenuOpened, toggleMenuState } = useState;

    return {
      isMenuOpened,
      toggleMenuState,
    };
  },
};
</script>

演示： https://codesandbox.io/s/happy-chandrasekhar-o05uv?file=/src/App.vue

关于组合api和可组合性：https://v3.vuejs.org/guide/composition-api-introduction.html