23 vue3中使用vuex--- mutations的使用

紧接上篇：

本篇记录 vue3 vuex的mutations的使用，默认进行了模块化的管理，开启了命名空间

目录：

user.js

const user = {
    namespaced: true,  //开启命名空间 建议开启
    state: {
        name: '',
        token: '',
        sex: 2   //0=>代表女 | 1=>代表男 | 2=>代表保密
    },
    mutations: {
        setUserInfo(state, {name, token, sex}) {
            state.name = name
            state.token = token
            state.sex = sex
        }
    }
}

export default user

index.js

import {createStore} from 'vuex'

import user from "./modules/user";

// 创建一个新的 store 实例
const store = createStore({
    strict: process.env.NODE_ENV !== 'production',  //在开发状态下开启严格模式
    modules: {
        user
    }
})

export default store

任意页面 Test.vue

<template>
  {{ obj }}
  <div>
    姓名： {{ name }}
  </div>
  <div>
    姓名1： {{ name1 }}
  </div>
  <div>
    token： {{ token }}
  </div>
  <div>
    性别： {{ sex === 0 ? '女' : sex === 1 ? '男' : '保密' }}
  </div>
  <button @click="login">登录</button>
</template>

<script>
import {computed} from 'vue'
import {useStore} from "vuex" //1.从vuex中引入useStore

export default {
  name: "Test",
  setup() {
    let {state, commit} = useStore();
    let name1 = state.user.name //错误的取值方式，虽然可以取出，但是丧失了响应式
    // 第一种写法
    let name = computed(() => state.user.name)  //正确的取值方式 采用computed计算属性此种写法，以保留响应性
    let token = computed(() => state.user.token)
    let sex = computed(() => state.user.sex)
    /
    // 第二种写法
    let obj = computed(() => state.user)


    async function login() {
      let resp = await httpLogin()  //模拟请求方法 得到name，token，sex
      commit("user/setUserInfo", resp)  //commit 提交数据
    }

    function httpLogin() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: '小米',
            token: 'token 123456789',
            sex: 1
          })
        }, 300)
      })
    }

    return {
      login,
      name1, //我的store已经存入了用户的信息值，但页面上的name1没有任何变化，丧失了响应式
      name,
      token,
      sex,
      obj
    }
  }
}
</script>

点击登录前：

点击登录后：