vue3.0中使用vuex

提示：项目是使用vue3+vite构建的

1、安装vuex

npm install vuex@next -S

2、在src的目录下创建一个文件夹store

• 文件目录表如下图
  
• 在store/index.js文件动态地引入modules文件中的各个文件
  

const obj = import.meta.globEager("./modules/*.js");  // 查找文件
const modules = Object.keys(obj).reduce( (modules,modulePath) => {
  const moduleName = modulePath.replace(/^\.\/modules\/(.*)\.\w+$/,'$1');
  modules[moduleName] = obj[modulePath].default;
  return modules;
}, {});

有同学应该注意到了第一行代码中的import.meta.globEager，为什么查找文件
不是使用require.context呢，因为vite不会编译require

• 在main.js文件中引入
  
• 此时已经成功引入vuex了，接下来看如何使用

<template>
  <div>使用store的数据：{{name}}</div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    let store = useStore();
    let state = reactive({
      name: store.state.user.name,
    })
    return {
      ...toRefs(state),
    }
  }
}
</script>

• 修改store中的数据

<template>
  <div>使用store的数据：{{name}}</div>
  <span class="btn" @click="handleChange">修改store的数据</span>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    let store = useStore();
    let state = reactive({
      name: store.state.user.name,
    })
    let handleChange = ()=> {
      store.commit("user/SET_NAME", "新的名字");
      state.name = store.state.user.name;
    }
    return {
      ...toRefs(state),
      handleChange
    }
  }
}
</script>

修改前
修改后

• 使用actions同理，在这里就不详细操作了，自己动手操作一下吧