vuex的使用

最新推荐文章于 2024-05-06 22:02:20 发布
最新推荐文章于 2024-05-06 22:02:20 发布
阅读量134 收藏
点赞数
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57479235/article/details/116708111
版权

vuex是什么

vuex全局的状态管理，挂载到根实例的vue 的状态管理器，依赖vue ，不可以单独使用

【注意】：Vuex 依赖 Promise (opens new window)。如果你支持的浏览器并没有实现 Promise (比如 IE)，那么你可以使用一个 polyfill 的库，例如 es6-promise

npm install es6-promise --save # npm

yarn add es6-promise # Yarn

安装vuex

- yarn add vuex

- npm i vuex

什么情况下使用vuex

解决跨层级组件通信

vuex5个核心  外加plugins

## state

存储全局状态的，数据也是双向绑定的

等价于组件里的data

 

## getters

用于对state进行计算，返回一个新值，等价于组件中的computed 

好像是四个参数   求答案 ？？

常用的第一个参数（state）    

 

## mutations

唯一用于修改state的方法，且只能执行同步代码。使用commit方法调用 ，自动被注入state参数

两个参数（state,commit传来的值）

 

## actions

用于执行异步操作的方法，只能通过调用mutations来修改state。使用dispatch调用，自动注入context对象参数

两个参数（content,dispatch传来的值）

 

## modules

   模块化开发，当多人开发项目时modules就显得及为重要

   默认情况下，只有 state 用有作用域对象，其他部分自动提升到根模块上。所以为了避免发生命名冲突，要使用命名空间

   在独立的模块化中使用namespaced设置为true，在该模块中除了state之外，其他的部分名字前自动拼接上模块名称

   

## plugins

    额外的vuex插件，用于增强扩展vuex没有的功能

     比如vuex 本地数据持久化  vuex -persist

     安装 npm i vuex-vuex-persist   as  yarn add vuex-vuex-persist

 

 

例子按回车时存入一条数据（基础做法）


<template>
	<div>
		<h1>按回车时存入一条数据</h1>
		<input @keyup.13="addlist" type="text" v-model="text" />
		<ul>
	        <li>当前共{{ $store.getters.len }}条数据</li>
			<li v-for="v in $store.state.list" :key="v">{{ v }}</li>
		</ul>
	</div>
</template>

<script>
import store from './store'
export default {
	store,
	data() {
		return {
			text: '',
		}
	},
	methods: {
		addlist() {
			// 通过dispatch调用actions里的setList函数，参数是this.text，因为actions用了promise封装所以这里可以用then调用返回结果
			this.$store.dispatch('setList', this.text).then((res) => {
				if (res) {
					alert('数据添加成功')
				}
			})
		},
	},
}
</script>
//store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    list: []
  },
  getters: {
    len(state) {
      return state.list.length
    }
  },
  mutations: {
    setList(stata, data) {
      stata.list.push(data)
    }
  },
  actions: {
    setList({ commit }, data) {

      return new Promise((resolve, reject) => {
        // 模拟异步操作
        setTimeout(() => {
          commit('setList', data)
          resolve(true)
        }, 500)
      })
    }
  },
  modules: {}

})
export default store

例子按回车时存入一条数据（辅助函数）

mapState，mapGetters是在computed中解构的

mapMutations，mapActions是在methods中解构的

<template>
	<div>
		<h1>按回车时存入一条数据</h1>
		<input @keyup.13="addlist" type="text" v-model="text" />
		<ul>
			<li>当前共{{ length }}条数据</li>
			<li v-for="v in list" :key="v">{{ v }}</li>
		</ul>
	</div>
</template>

<script>
import store from './store'
//vuex中引入辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
	store,
	data() {
		return {
			text: '',
		}
	},
	computed: {
		// 可以用数组结构和对象结构两种方式，数据复杂有可能重复就用对象形式
		...mapState(['list']),
		...mapGetters({ length: 'len' }),
	},
	methods: {
		...mapActions(['setList']),
		addlist() {
			// 通过dispatch调用actions里的setList函数，参数是this.text，因为actions用了promise封装所以这里可以用then调用返回结果
			this.setList(this.text).then((res) => {
				if (res) {
					alert('数据添加成功')
				}
			})
		},
	},
}
</script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    list: []
  },
  getters: {
    len(state) {
      return state.list.length
    }
  },
  mutations: {
    setList(stata, data) {
      stata.list.push(data)
    }
  },
  actions: {
    setList({ commit }, data) {

      return new Promise((resolve, reject) => {
        // 模拟异步操作
        setTimeout(() => {
          commit('setList', data)
          resolve(true)
        }, 500)
      })
    }
  },
  modules: {}

})
export default store

 

vuex模块化开发

辅助函数的应用（最方便的应用方式）

第一种

 createNamespacedHelpers 

创建命名空间的助手函数,方便让当前组件的所有store里的独立资源都是来自于同一个模块中的

//两个js文件与第二种方法一致
<template>
	<div>
		<h1>按回车时存入一条数据</h1>
		<input @keyup.13="addlist" type="text" v-model="text" />
		<ul>
			<li>当前共{{ len }}条数据</li>
			<li v-for="v in list" :key="v">{{ v }}</li>
		</ul>
	</div>
</template>

<script>
import store from './store'
//es6语法as 给createNamespacedHelpers命名为helper
import { createNamespacedHelpers as helper } from 'vuex'
//helper会默认给每个函数都加上路径参数   'a/'
const { mapState, mapMutations, mapGetters, mapActions } = helper('a/')
export default {
	store,
	data() {
		return {
			text: '',
		}
	},
	computed: {
		// 可以用数组结构和对象结构两种方式，数据复杂有可能重复就用对象形式
		...mapState(['list']),
		...mapGetters({ len: 'len' }),
	},
	methods: {
		...mapActions(['setList']),
		addlist() {
			// 通过dispatch调用actions里的setList函数，参数是this.text，因为actions用了promise封装所以这里可以用then调用返回结果
			this.setList(this.text).then((res) => {
				if (res) {
					alert('数据添加成功')
					console.log(this)
				}
			})
		},
	},
	mounted() {},
}
</script>

第二种

<template>
	<div>
		<h1>按回车时存入一条数据</h1>
		<input @keyup.13="addlist" type="text" v-model="text" />
		<ul>
			<li>当前共{{ len }}条数据</li>
			<li v-for="v in list" :key="v">{{ v }}</li>
		</ul>
	</div>
</template>

<script>
import store from './store'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
	store,
	data() {
		return {
			text: '',
		}
	},
	computed: {
		// 可以用数组结构和对象结构两种方式，数据复杂有可能重复就用对象形式
		...mapState('a/', ['list']),
		...mapGetters('a/', { len: 'len' }),
	},
	methods: {
		...mapActions('a/', ['setList']),
		addlist() {
			// 通过dispatch调用actions里的setList函数，参数是this.text，因为actions用了promise封装所以这里可以用then调用返回结果
			this.setList(this.text).then((res) => {
				if (res) {
					alert('数据添加成功')
					console.log(this)
				}
			})
		},
	},
	mounted() {},
}
</script>
//store.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
import a from './a'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    a
  }
})
export default store
//a.js文件
export default {
  namespaced: true,
  state: {
    list: []
  },
  getters: {
    len(state) {
      return state.list.length
    }
  },
  mutations: {
    setList(stata, data) {
      stata.list.push(data)
    }
  },
  actions: {
    setList({ commit }, data) {

      return new Promise((resolve, reject) => {
        // 模拟异步操作
        setTimeout(() => {
          commit('setList', data)
          resolve(true)
        }, 500)
      })
    }
  },
}

plugins插件使用

<template>
	<div>
		<!-- vuex插件：plugins 本地数据持久化 -->
		{{ count }}
		<button @click="setCount(count - 100)">递减</button>
	</div>
</template>

<script>
import store from '../store'
import { mapState, mapMutations } from 'vuex'
export default {
	store,
	data() {
		return {}
	},
	computed: {
		...mapState(['count']),
	},
	methods: {
		...mapMutations(['setCount']),
	},
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'
Vue.use(Vuex)
// 初始化本地存储
const Persist = new VuexPersist({
  // 指定数据存到哪里
  storage: window.sessionStorage
})
const store = new Vuex.Store({
  // 安装插件
  plugins: [Persist.plugin],
  state: {
    count: 10000
  },
  mutations: {
    setCount(state, v) {
      state.count = v
    }
  }


})
export default store

 

Api工程师~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex中的Store
stormzi的博客
07-07 1万+
1. Vuex是什么 在了解Store之前，我们先来看看Vuex是个什么东西。Vuex本质上就是一个Vue.js的插件，是用于对复杂应用进行状态管理用的，打印Vuex以后输出： { ​ Store: function Store(){}, ​ mapActions: function(){}, // 对应Actions的结果集 ​ mapGetters: function(){}, // 对应Getters的结果集 ​ mapMutations: function(){}, // 对应Muta
VUEX基础入门Store使用详解
小小默：进无止境
11-19 9499
【1】vuex 是什么 github 站点: https://github.com/vuejs/vuex 在线文档: https://vuex.vuejs.org/zh-cn/ 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。 当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高
vue中的store
最新发布
三三木木七的博客
05-06 1234
当构建一个简单的 Vuex store 时，通常包括以下几个核心概念：状态 (state)、操作 (mutations/actions)、获取器 (getters) 和模块 (modules)。状态 (State)状态是存储在 Vuex store 中的数据。它是应用程序的单一数据源，即应用中的所有组件共享相同的状态。通常在 Vuex store 中定义一个对象，作为状态的容器。这个对象包含应用中需要共享的所有数据。在组件中可以通过访问状态。操作 (Mutations/Actions)
Vuex中的store
像鱼的博客
08-22 2511
第一步：首先你要具备实战它的载体，那就是你有已经跑起来的vue项目。 第二步：安装vuex,引入vuex npm install vuex --save import Vuex from 'vuex' Vue.use(Vuex) 第三步：在vue->src目录下创建一个store.js文件 首先引入vue,因为$store是在vc身上 // 引入vue import Vue from "vue"; // 安装并引入vuex import Vuex from 'vuex' // 使用
vuex，简单易懂！！！
m0_49159526的博客
12-08 449
vuex 为什么会有Vuex ? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。 结论 修改state状态必须通过mutations mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行 执行异步代码，要通过actions，然后
Vuex基础用法和Vuex中的store
weixin_58431406的博客
06-17 2101
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，Vuex 中可以存放一些需要在多个界面中进行共享的信息。比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等，我们可以放在统一的地方，对它进行保存和管理。...............
vuex 使用文档小结篇
10-18
Vuex 是一个专为Vue.js应用程序开发的状态管理模式，集中式存储管理应用的所有组件状态。本文给大家介绍了vuex使用文档，需要的朋友参考下吧
vuex 使用步骤代码
09-08
以下是对 Vuex 的使用步骤和相关知识点的详细说明： 1. **安装**： 在项目中使用 Vuex，首先需要通过 npm 或 yarn 安装它： ```bash npm install vuex # 或 yarn add vuex ``` 2. **创建 store**： 在项目...
浅谈super-vuex使用体验
08-27
Super-Vuex 使用体验详解 Super-Vuex 是一种用于简化 Vuex 的数据架构解决方案。Vuex 是一个常用的状态管理工具，但是在实际应用中存在一些问题，如数据共享、业务接口分离、数据模块化管理等。Super-Vuex 正是为了...
Vuex使用详细资料包
11-11
本详细资料包围绕"Vuex使用"展开，旨在帮助开发者深入理解和熟练运用Vuex来优化Vue项目的开发。 在Vuex中，一个应用的所有状态被存储在一个单一的store对象中。这个store包含了应用中的所有状态，以及进行状态变更...
vuex使用举例，简单入门
10-31
通过以上讲解，你应该对 Vuex 的基本使用有了清晰的理解，包括如何创建一个简单的 Vuex 实例以及如何进行模块化管理。接下来，你可以通过阅读 `vuex_demo2` 和 `vuex_demo3` 文件来进一步深入学习，它们可能包含更多...
Vuex详解
输入技术、输出想法
04-28 7328
Vuex详解认识VuexVuex是做什么的?管理什么状态呢?单界面的状态管理单界面状态管理的实现多界面状态管理Vuex基本使用安装使用Vuex简单的案例Vuex核心概念StateState单一状态树GettersGetters基本使用Getters作为参数和传递参数MutationMutation状态更新Mutation传递参数Mutation提交风格Mutation响应规则Mutation常量类型 –概念Mutation同步函数ActionAction的基本定义Action返回的PromiseModule
浅谈vuex源码分析
前端程序猿steven的博客
05-07 222
vuex使用方式 store/index.js import Vue from 'vue' import Vuex from '@/vuex' // import Vuex from 'vuex' // import logger from 'vuex/dist/logger.js' Vue.use(Vuex) // // new Vue let store = new Vuex.Store({ state: { // state = > data name: 'zhufe
【Vue】Vuex-store
STATICHIT静砸的博客
11-27 1752
Vuex是实现组件全局状态(数据）管理的一种机制，可以方便的实现组件之间数据的共享。 像一个仓库一样！（一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可。）vuex中的主要核心概念如下: StateState提供唯一的公共数据源，所有共享的数据都要统一放到Store的 State中进行存储。组件访问State中数据法一：通过 $store.state.全局数据名称 获取。法二：按需导入 对比两种方式： 对于Vuex，不允许直接修改sto
vuex使用createNamespacedHelpers不生效（一定要与namespaced一块使用）
见贤思齐焉，见不贤内自省
09-06 1443
vuex使用createNamespacedHelpers不生效（一定要与namespaced一块使用）
vuex中state，mutations的隔离-使用createNamespacedHelpers
aliven1的博客
10-20 545
vuex中state，mutations的隔离-使用createNamespacedHelpers
Vuex 命名空间 namespaced 介绍
热门推荐
扛麻袋的少年的博客
04-18 4万+
接上篇：12.组件中调用Vuex的state，getters，mutations，actions，modules的数据传递、传参问题 Vuex由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 因此，Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、m...
vuex使用commit
09-05
Vuex使用commit来触发一个mutation的执行。Mutation是用来修改Vuex中的状态的唯一途径。使用commit方法可以向store提交一个mutation，并且传递一个可选的payload参数，该参数可以是一个对象或者其他类型的数据，用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值