IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 10 — vuex -> 正文阅读

[JavaScript知识库]10 — vuex

1,vuex

官网介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态(数据)管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解:是一个‘’仓库‘’,只是vuex里面存储的是数据。

2,vuex的各个模块

  1. state:用于数据的存储,
  2. getters:如vue的计算属性一样,可以对state的数据进行二次封装,
  3. mutations:同步操作,改变state数据的唯一途径,
  4. actions:异步操作,类似于mutation,用于提交mutation来改变状态,
  5. modules:将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。

3,Vuex实例应用

首先在项目中下载vuex,执行命令:npm install --save vuex
在src目录下创建store文件夹
store目录结构

store目录结构

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

//把modules下的所有文件导入
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
   // set './app.js' => 'app'
   const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
   const value = modulesFiles(modulePath)
   modules[moduleName] = value.default
   return modules
}, {})

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

export default store

在main.js中导入store。

import store from './store'

//在vue全局对象上注册store(相当于挂载到全局对象Vue上)
new Vue({
  el: '#app',
  router,
   store,
  components: { App },
  template: '<App/>'
});

数据初始化(./modules/login.js)

const state = {
    account: '管理员',
    password: '123456',
    msg:'',
}

//修改数据的唯一方法(同步)
const mutations = {
    SET_ACCOUNT: (state, account) => {
        // 将组件的数据存放于state
        state.account = account
    },
    SET_PASSWORD: (state, password) => {
        state.password = password
    },
    SET_MSG: (state, msg) => {
        state.msg = msg
    },
}

//提交mutation,改变数据,
const actions = {
    alterMsg({ commit }, v) {
        commit('SET_MSG', v)
    },
}

/*
  * namespaced: true:使其成为带命名空间的模块。当模块被注册后,
  * 它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
  * */
export default {
    namespaced: true,
    state,
    mutations,
    actions
}

存、取值

<template>
    <div>
        <h1>欢迎来到页面——vuex</h1>
        <p>当前页面msg的值:{{msg}}</p>
        <div>
            <span>点击按钮,把msg存入vuex,并在下个页面显示</span>
            <el-button type="primary" @click="handleSaveMsg">保存msg</el-button>
        </div>
        <hr>
        <p>第1种方法,显示vuex中存在的账户号:{{oneAccount}}</p>
        <p>第2种方法,显示vuex中存在的账户号:{{twoAccout}}</p>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    name: "vueVuex",
    data() {
        return {
            msg: "Hello Vue!",
        };
    },
    computed: {
        ...mapState({
            //第2种取值,state.
            twoAccout: state => state.login.account,
        }),
        oneAccount() {
            // 第1种取值,this.$store.state.
            return this.$store.state.login.account;
        }
    },
    methods: {
        handleSaveMsg() {
            /* //同步存值
            //this.$store.commit(键,值)。
            this.$store.commit("login/SET_MSG", this.msg);
            this.$router.push({
                name: "/vue/vuex-details"
            }); */

            //异步存值
            //this.$store.dispatch(键,值)。
            this.$store.dispatch("login/alterMsg",this.msg);
            this.$router.push({
                name: "/vue/vuex-details"
            });
        },
    },
};
</script>

效果展示
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-07-03 10:40:34  更:2022-07-03 10:43:47 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 9:50:31-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码