useStore使用

注意：以下所有测试用例均适用了命名空间，state、getters、mutations、actions均在user这个module里面
一、准备工作
1、准备user.js文件
在store文件夹下生成一个module文件夹，文件夹里面生成user.js文件，文件内容如下：

let state = {
	     username: 'admin',
	     total: 0,
	     accessToken: 'admin',
	     avatar: '随意设置',
	     rolename: '随意设置',
	     userList: [{ name: 'admin', age: 29 }]
	 },
	 getters = {
	 	 accessToken: state => state.accessToken,
	     username: state => state.username,
	     rolename: state => state.rolename,
	     avatar: state => state.avatar,
	     userList: state => state.userList,
	     total: state => state.total
	 },
	 mutations = {
	     setAccessToken (state, accessToken) {// 设置accessToken
            state.accessToken = accessToken
        },
        setUsername (state, username) {// 设置用户名
            state.username = username
        },
        setRolename (state, rolename) {// 设置权限名
            state.rolename = rolename
        },
        setAvatar (state, avatar) {// 设置头像
            state.avatar = avatar
        },
        setUserList (state, list) {// 设置用户列表
            state.userList = list
        },
        setTotal (state, total) {
            state.total = total
        }
	 },
	 actions = {
	     testActions ({ commit }, num) {
	         setTimeout(() => {
	             commit('setTotal', num)
	             console.log(num)
	         }, 2000)
	     }
	 };
export default { state, getters, mutations, actions }

2、修改store/index.js文件

import { createStore } from 'vuex'
let files = require.context('./modules', false, /\.js$/),
    modules = {};
files.keys().forEach((key) => {
    modules[key.replace(/\.\/|\.js/g, '')] = files(key).default
})
// 导入所有 vuex 模块，自动加入namespaced:true，用于解决vuex命名冲突
Object.keys(modules).forEach(key => {
    modules[key]['namespaced'] = true
})

export default createStore({
    modules
})

1. 获取整个state
   获取: userStore = computed( () => store.state.user )
   使用: userStore.value.username
   插值式中使用: userStore.username
2. 获取单个state
   获取: username = computed( () => store.state.user.username )
   使用: username.value
   插值式中使用: username
3. 获取整个getters
   获取: getters = computed( () => store.getters )
   使用: getters.value[“user/username”]
   插值式中使用: getters[“user/username”]
4. 获取单个getters
   获取: gUsername = computed( () => store.getters[“user/username”] )
   使用: gUsername.value
   插值式中使用: gUsername
5. mutations的使用
   方式一、直接调用 store.commit(“user/setTotal”, 20)
   方式二、
   let totalNum = ref(30),
   setTotal = totalNum => store.commit(“user/setTotal”, totalNum);// 声明变量
   setTotal(totalNum.value)// 执行方法
6. actions的使用
   方式一、直接调用 store.dispatch(“user/testActions”, 20)
   方式二、
   let testNum = ref(30),
   testActions = testNum => store.dispatch(“user/testActions”, testNum);// 声明变量
   testActions(testNum.value)// 执行方法

测试代码usestore.vue文件内容(只展示了script里面的代码)

import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
export default {
    name: 'UsestoreCom',
	setup () {
           let store = useStore(),
               userStore = computed( () => store.state.user ),// 获取整个state
               username = computed( () => store.state.user.username ),// 获取单个state
               getters = computed( () => store.getters ),// 获取整个getters
               gUsername = computed(() => store.getters['user/username']),//获取单个getters
               // mitations的使用方式1
               totalNum = ref(30),
               setTotal = totalNum => store.commit('user/setTotal', totalNum),
               // actions的使用方式1
               testNum = ref(50),
               testActions = testNum => store.dispatch("user/testActions", testNum);
           onMounted(() => {
               // state
               console.log(userStore.value.username)// admin
               console.log(username.value)// admin
               console.log('-----------------')
               // getters
               console.log(getters.value['user/username'])// admin
               console.log(gUsername.value)// admin
               console.log('-----------------')
               // mutations
               setTotal(totalNum.value)
               // mitations的使用方式2
               // store.commit('user/setTotal', 20)
               console.log(store.getters['user/total'])// 30
               console.log('-----------------')
               // actions
               testActions(testNum.value)
               // actions的使用方式2
               // store.dispatch('user/testActions', 40)
           })
		return {
			userStore,
			username,
			getters,
			gUsername
		}
	}
}

mapState、mapGetters、mapMutations、mapActions的使用

本实例依然使用use module，直接上代码
注意：这里只放置了js的实现方式，ts相关的实现方式会在之后更新。

import { computed, onMounted } from 'vue'
import { mapState, mapGetters, mapMutations, mapActions, useStore } from 'vuex'
export default {
       name: 'MapxxxCom',
	setup () {
           let store = useStore(),
			username2 = computed(() => store.getters['user/username']),
			// mapState
			states = mapState('user', ['accessToken', 'rolename']),
			accessToken = computed(states.accessToken.bind({ $store: store })),
			rolename = computed(states.rolename.bind({ $store: store })),
			// mapGetters
			getters = mapGetters('user', ['username', 'avatar']),
			username = computed(getters.username.bind({ $store: store })),
			avatar = computed(getters.avatar.bind({ $store: store })),
			// mapMutations
			mutations = mapMutations('user', ['setUserList', 'setTotal']),
			setUserList = mutations.setUserList.bind({ $store: store }),
			setTotal = mutations.setTotal.bind({ $store: store }),
			// mapActions
			actions = mapActions('user', ['testActions']),
			testActions = actions.testActions.bind({ $store: store });
		onMounted(() => {
			// // mapState
			// console.log('mapState accessToken: ' + accessToken.value)
			// console.log('mapState rolename: ' + rolename.value)

			// // mapGetters
			// console.log('mapGetters username: ' + username.value)
			// console.log('mapGetters avatar:' + avatar.value)

			// // mapMutations
			// setUserList([{ name: 'abc' }])
			// console.log(store.getters['user/userList'])

			// // mapActions
			// testActions()
		})
		return {
			// 
		}
	}
}