小镇青年的文档中心

vuex之store的基本使用

Vuex文档 Vuex 是什么？ | Vuex
Vuex核心
- state：存储基本数据
- getter：从state中派生出一些状态
- mutation ： store中更改state数据状态的唯一方法（mutations必须是同步函数）
- action：包含异步操作（请求API方法）、回调函数提交mutaions更改state数据状态，使之可以异步
- module：模块化Vuex（将store分割成不同的模块）

安装引入

安装vuex
shell
```
npm install vuex --save
```

在main.js中引入store模块

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";

createApp(App)
  .use(store)   
  .mount("#app");

store目录下的index.js，以操作用户信息的用户名为例

import { createStore } from 'vuex'

export default createStore({
    // 存储基本数据
    state: {
        username:''
    },
    // 修改基本数据
    mutations: {
        setUserName(state, username) {
            state.username = username
        }
    },
    // 从基本数据派生的数据,当然也可以直接返回基本数据
    getters: {
      getUserName(state) {
          return state.username
      },
      getFullUserName(state) {
         return 'my name is ' + state.username
      } 
    },
    // 异步操作
    actions: {
        getUserInfo({ state, commit }) {
            new Promise(resolve => {
                setTimeout(() => {
                    // 随机生成一个随机数1-10
                    var num = Math.floor((Math.random()*10)+1)
                    // 提交修改username属性
                    commit("setUserName",'name' + num);
                    // 返回处理结果
                    resolve();
                }, 1000);
            });
        }
    },
    modules: {}
})

基本使用

获取state数据的方法

vue

<template>
    <h2>获取用户名方式1：{{username1}}</h2>
    <h2>获取用户名方式2：{{username2}}</h2>
    <h2>获取用户名方式3：{{username3}}</h2>
    <h2>获取用户名方式4：{{$store.state.username}}</h2>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        name: "userinfo",
        data() {
            return {}
        },
        computed: {
            username1() {
                return this.$store.state.username
            },
            ...mapState({
                username2: state => state.username,
                username3(state) {
                    return state.username;
                }
            }),
        },
        methods: {
        }
    }
</script>

<style scoped>
</style>

通过getter获取派生数据

this.username = this.$store.getters.getFullUserName

通过mutation修改state数据

vue

<template>
	<button @click="setUserName1">修改用户名方式1</button>
    <button @click="setUserName('new name')">修改用户名方式2</button>
    <button @click="setUserName2('new name')">修改用户名方式3</button>
</template>

<script>
    import { mapMutations } from 'vuex'

    export default {
        name: "userinfo",
        data() {
            return {}
        },
        methods: {
            setUserName1() {
                this.$store.commit('setUserName', 'lss0666')
            },
            ...mapMutations(['setUserName']),
            ...mapMutations({
                setUserName2: "setUserName"
            }),
        }
    }
</script>

<style scoped>
</style>

调用异步方法获取用户名

vue

<template>
    <button @click="getUserInfo1">异步获取用户名1</button>
    <button @click="getUserInfo">异步获取用户名2</button>
    <button @click="getUserInfo2">异步获取用户名3</button>
</template>

<script>
    import {mapState, mapActions, mapMutations} from 'vuex'

    export default {
        name: "userinfo",
        data() {
            return {}
        },
        methods: {
            syncGetUserName() {
                this.$store.dispatch('getUserInfo1')
            },
            ...mapActions(["getUserInfo"]),
            ...mapActions({
                getUserInfo2: "getUserInfo"
            }),
        }
    }
</script>

<style scoped>
</style>

vuex之store分模块优化

txt

store
 ┣ modules
 ┃ ┣ user.js
 ┃ ┣ 其他.js
 ┣ getters.js
 ┗ index.js

基本使用

store/modules/user.js如下

const user = {
  namespaced: true, // 设置成true,使用该模块时要带上模块名user
  state: {
    token: "",
    name: "",
    avatar: ""
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token;
    },
    SET_EXPIRES_IN: (state, time) => {
      state.expires_in = time;
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim();
      const password = userInfo.password;
      const code = userInfo.code;
      const uuid = userInfo.uuid;
      const rKey = userInfo.rKey;
      const iv = userInfo.iv;
      const codeValidate = userInfo.codeValidate;
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid, rKey, iv, codeValidate)
          .then(res => {
            let data = res.data;
            commit("SET_TOKEN", data.access_token);
            commit("SET_EXPIRES_IN", data.expires_in);
            resolve(res);
          })
          .catch(error => {
            reject(error);
          });
      });
    },
  },
};

export default user

store/index.js内容如下

import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user";
import getters from "./getters";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    user
  },
  getters,
})

export default store

store/getters.js内容如下

const getters = {
  // user.js开启了命名空间,所以找目标属性的时候带着模块名user
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}
export default getters

使用getters获取值
js
```
this.token = this.$store.getters.token
```

selenium

PaddleOCR

idea

jd-gui

navicat

vscode

vercel

vuex之store的基本使用

vuex之store分模块优化

vuex之store的基本使用 ​

vuex之store分模块优化 ​

vuex之store的基本使用

vuex之store分模块优化