使用Pinia代替Vuex进行数据存储

2022-06-11 10:33:49 +08:00
parent ef604d008d
commit 859f8acfe2
41 changed files with 700 additions and 797 deletions
@@ -49,13 +49,14 @@

 <script setup>
 import { CountUp } from 'countup.js'
+import useSocketStore from '@/store/modules/socket';
 const emit = defineEmits()
 const { proxy } = getCurrentInstance()

 const state = reactive({
  chatNum: 1390,
  onlineNum: computed(() => {
-    return proxy.$store.getters.onlineUserNum
+    return useSocketStore().onlineNum
  }),
  amount: 99998,
  order: 1999,
@@ -130,6 +130,9 @@ import WordCloudChat from './dashboard/WordCloud.vue'

 import dayjs from 'dayjs'

+import useUserStore from '@/store/modules/user'
+import useSocketStore from '@/store/modules/socket'
+
 const data = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
@@ -200,13 +203,13 @@ const data = {
 }
 const { proxy } = getCurrentInstance()
 const userInfo = computed(() => {
-  return proxy.$store.getters.userinfo
+  return useUserStore().userInfo
 })
 const currentTime = computed(() => {
  return proxy.parseTime(new Date())
 })
 const onlineUsers = computed(() => {
-  return proxy.$store.getters.onlineUsers
+  return useSocketStore().onlineUsers
 })

 let lineChartData = reactive([])
@@ -69,8 +69,9 @@ import { encrypt, decrypt } from '@/utils/jsencrypt'
 import defaultSettings from '@/settings'
 import starBackground from '@/views/components/starBackground.vue'
 import LangSelect from '@/components/LangSelect/index.vue'
+import useUserStore from '@/store/modules/user'

-const store = useStore()
+const userStore = useUserStore()
 const router = useRouter()
 const { proxy } = getCurrentInstance()

@@ -118,8 +119,8 @@ function handleLogin() {
        Cookies.remove('rememberMe')
      }
      // 调用action的登录方法
-      store
-        .dispatch('Login', loginForm.value)
+      userStore
+        .login(loginForm.value)
        .then(() => {
          proxy.$modal.msgSuccess(proxy.$t('login.loginSuccess'))
          router.push({ path: redirect.value || '/' })
@@ -1,50 +1,55 @@
 <template>
-	<div class="app-container">
-		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
-			<el-form-item>
-				<el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="YYYY-MM-DD" type="daterange"
-					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
-				</el-date-picker>
-			</el-form-item>
-			<el-form-item>
-				<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
-				<el-button icon="refresh" @click="resetQuery">重置</el-button>
-			</el-form-item>
-		</el-form>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+      <el-form-item>
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          style="width: 240px"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+        <el-button icon="refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>

-		<el-table v-loading="loading" :data="list">
-			<!-- <el-table-column label="编号" align="center" prop="operId" width="60px" :show-overflow-tooltip="true" /> -->
-			<el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
-			<el-table-column prop="businessType" label="业务类型" align="center">
-				<template #default="scope">
-					<dict-tag :options="businessTypeOptions" :value="scope.row.businessType" />
-				</template>
-			</el-table-column>
-			<el-table-column label="请求方式" align="center" prop="requestMethod" />
-			<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
-			<el-table-column label="操作状态" align="center" prop="status">
-				<template #default="{ row }">
-					<dict-tag :options="statusOptions" :value="row.status"></dict-tag>
-				</template>
-			</el-table-column>
+    <el-table v-loading="loading" :data="list">
+      <!-- <el-table-column label="编号" align="center" prop="operId" width="60px" :show-overflow-tooltip="true" /> -->
+      <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
+      <el-table-column prop="businessType" label="业务类型" align="center">
+        <template #default="scope">
+          <dict-tag :options="businessTypeOptions" :value="scope.row.businessType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="请求方式" align="center" prop="requestMethod" />
+      <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
+      <el-table-column label="操作状态" align="center" prop="status">
+        <template #default="{ row }">
+          <dict-tag :options="statusOptions" :value="row.status"></dict-tag>
+        </template>
+      </el-table-column>

-			<el-table-column label="日志内容" align="center" prop="errorMsg" :show-overflow-tooltip="true" />
-			<el-table-column label="操作日期" align="center" prop="operTime" width="180">
-				<template #default="scope">
-					<span>{{ scope.row.operTime }}</span>
-				</template>
-			</el-table-column>
-		</el-table>
+      <el-table-column label="日志内容" align="center" prop="errorMsg" :show-overflow-tooltip="true" />
+      <el-table-column label="操作日期" align="center" prop="operTime" width="180">
+        <template #default="scope">
+          <span>{{ scope.row.operTime }}</span>
+        </template>
+      </el-table-column>
+    </el-table>

-		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-			v-model:limit="queryParams.pageSize" @pagination="getList" />
-
-	</div>
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+  </div>
 </template>

 <script setup name="operlog">
 import { list as queryLog } from '@/api/monitor/operlog'
-
+import useUserStore from '@/store/modules/user'
 // 遮罩层
 const loading = ref(true)
 // 总条数
@@ -60,53 +65,50 @@ const dateRange = ref([])

 // 查询参数
 const queryParams = reactive({
-	pageNum: 1,
-	pageSize: 10,
-	title: undefined,
-	operName: undefined,
-	businessType: undefined,
-	status: undefined,
+  pageNum: 1,
+  pageSize: 10,
+  title: undefined,
+  operName: undefined,
+  businessType: undefined,
+  status: undefined,
 })

 const { proxy } = getCurrentInstance()
 var dictParams = [
-	{ dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
-	{ dictType: 'sys_common_status', columnName: 'statusOptions' },
+  { dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
+  { dictType: 'sys_common_status', columnName: 'statusOptions' },
 ]
 proxy.getDicts(dictParams).then((response) => {
-	response.data.forEach((element) => {
-		proxy[element.columnName] = element.list
-	})
+  response.data.forEach((element) => {
+    proxy[element.columnName] = element.list
+  })
 })

 /** 查询登录日志 */
 function getList() {
-	loading.value = true
-	queryParams.operName = proxy.$store.getters.userinfo.userName
-	queryLog(proxy.addDateRange(queryParams, dateRange.value)).then(
-		(response) => {
-			loading.value = false
-			if (response.code == 200) {
-				list.value = response.data.result
-				total.value = response.data.totalNum
-			} else {
-				total.value = 0
-				list.value = []
-			}
-		}
-	)
+  loading.value = true
+  queryParams.operName = useUserStore().userInfo.userName
+  queryLog(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
+    loading.value = false
+    if (response.code == 200) {
+      list.value = response.data.result
+      total.value = response.data.totalNum
+    } else {
+      total.value = 0
+      list.value = []
+    }
+  })
 }
 /** 重置按钮操作 */
 function resetQuery() {
-	dateRange.value = []
-	proxy.resetForm('queryForm')
-	handleQuery()
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
 }
 /** 搜索按钮操作 */
 function handleQuery() {
-	queryParams.pageNum = 1
-	getList()
+  queryParams.pageNum = 1
+  getList()
 }
 getList()
 </script>
-
@@ -57,6 +57,7 @@
 import 'vue-cropper/dist/index.css'
 import { VueCropper } from 'vue-cropper'
 import { uploadAvatar } from '@/api/system/user'
+import useUserStore from '@/store/modules/user'

 export default {
  components: {
@@ -69,7 +70,7 @@ export default {
    },
  },
  setup() {
-    const store = useStore()
+    const useStore = useUserStore()
    const { proxy } = getCurrentInstance()

    const open = ref(false)
@@ -78,7 +79,7 @@ export default {
    const fileName = ref('')
    //图片裁剪数据
    const options = reactive({
-      img: store.getters.avatar, // 裁剪图片的地址
+      img: useStore.avatar, // 裁剪图片的地址
      autoCrop: true, // 是否默认生成截图框
      autoCropWidth: 200, // 默认生成截图框宽度
      autoCropHeight: 200, // 默认生成截图框高度
@@ -126,12 +127,12 @@ export default {
    function uploadImg() {
      proxy.$refs.cropper.getCropBlob((data) => {
        let formData = new FormData()
-				var fileOfBlob = new File([data], fileName.value);
+        var fileOfBlob = new File([data], fileName.value)
        formData.append('picture', fileOfBlob)
        uploadAvatar(formData).then((response) => {
          open.value = false
          options.img = response.data.imgUrl
-          store.commit('SET_AVATAR', options.img)
+          useStore.avatar = options.img
          proxy.$modal.msgSuccess('修改成功')
          visible.value = false
        })
@@ -143,7 +144,7 @@ export default {
    }
    /** 关闭窗口 */
    function closeDialog() {
-      options.img = store.getters.avatar
+      options.img = useStore.avatar
      options.visible = false
    }