Vue3通过setup使用vuex多模块持久化+命名空间页面调用

首先定义模块化module

没有使用过vuex持久化指令,点击这里跳转juejin.cn/post/698573…

在store/index.js 引入module下的两个文件

module/streamhome.js, 通过namespaced:true打开命名空间

代码如下:

export default {
  state: {
    name: "这是直播管理页面vuex状态",
    data: [],
  },
  mutations: {
    addData(state, val) {
      if (val) {
        state.data.push({ ...val });
      }
    },
    deitData(state, val) {
      if (val) {
        state.data = val;
      }
    },
    delData(state, val) {
      if (val) {
        state.data = val;
      }
    },
  },
  actions: {},
  namespaced: true,
};

view视图页面，Vue3版本setup语法下使用

代码如下

<script setup>
import { onMounted,computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
// 通过计算属性获取store下state状态值
const Data = computed(() => store.state.streamhome.data);

onMounted(() => {
 let Data=[]
 // 随便写一个对象用来测试
 let newData = {
    id: Data.value.length>0 ? Data.value[Data.value.length - 1].id + 1 : 0,
    ...val,
    start_time: "2020-06-12 00:00:00",
    cover_img: "权当这里有图片路径一",
    share_img: "权当这里有图片路径二",
  };
  // streamhome/deitData  前面的为命名的模块，后面的为模块内的方法例如异步或者状态修改
  store.commit("streamhome/deitData", newData);
                                      👆 👆 👆 这个是要传递的参数，当前传递的是newData对象
});
</script>

不知各位是否有过这种感觉，微软自带的输入法表情若是做成icon图标感觉更加快捷和方便

上面效果便是一个展现，今天先写到这里吧，有了再补充