对vuex中store和$store的区别说明


Posted in Javascript onJuly 24, 2020

这里写自定义目录标题

<router-link to="/login">{{ $store.state.userName }}</router-link>
<router-link to="/login">{{ store.state.userName }}</router-link>
<router-link to="/login">{{ this.store.state.userName }}</router-link>
<router-link to="/login">{{ this.$store.state.userName }}</router-link>

1、$store 是挂载在 Vue 实例上的(即Vue.prototype),而组件也其实是一个Vue实例(所有组件都是实例,每个组件都是一个vue实例,所有的 Vue 组件都是 Vue 实例:一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成,也就是说:组件放到根组件中使用)在组件中可使用 this 访问原型上的属性,template 拥有组件实例的上下文,可直接通过 {{ KaTeX parse error: Expected 'EOF', got '}' at position 22: …state.userName }̲} 访问,等价于 script…store.state.userName。

2、store是挂载到vue上,为vue的根实例;store引入后被注入到vue上,成为vue的原型属性,所以通过store是挂载到vue上,为vue的根实例;store引入后被注入到vue上,成为vue的原型属性,所以通过store是挂载到vue上,为vue的根实例;store引入后被注入到vue上,成为vue的原型属性,所以通过store.state和this.$store.state可以访问。

补充知识:vue 的状态管理vuex中store的使用

一、状态管理(vuex)简介

vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。

二、状态管理核心

状态管理有5个核心,分别是state、getter、mutation、action以及module。分别简单的介绍一下它们:

开始使用vuex,新建一个 sotre文件夹,分开维护 actions mutations getters

1、state

state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。

在store/index.js文件中新建vuex 的store实例

*as的意思是 导入这个文件里面的所有内容,就不用一个个实例来导入了。

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 导入响应的模块,*相当于引入了这个组件下所有导出的事例
import * as actions from './actions'
import * as mutations from './mutations'
 
Vue.use(Vuex)
// 首先声明一个需要全局维护的状态 state,比如 我这里举例的resturantName
const state = {
  resturantName: '飞歌餐馆' // 默认值
  // id: xxx 如果还有全局状态也可以在这里添加
  // name:xxx
}
// 注册上面引入的各大模块
const store = new Vuex.Store({
  state,  // 共同维护的一个状态,state里面可以是很多个全局状态
  getters, // 获取数据并渲染
  actions, // 数据的异步操作
  mutations // 处理数据的唯一途径,state的改变或赋值只能在这里
})
 
export default store // 导出store并在 main.js中引用注册。

另种封装

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
/* eslint-disable no-new */
const store = new Vuex.Store({
 modules: {
  user //包含state、actions、mutations 
 },
 getters
})
export default store

2、getter

getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。

// 获取最终的状态信息

export const resturantName = state => state.resturantName

3、mutation

更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。

// 提交 mutations是更改Vuex状态的唯一合法方法
export const modifyAName = (state, name) => { // A组件点击更改餐馆名称为 A餐馆
  state.resturantName = name // 把方法传递过来的参数,赋值给state中的resturantName
}
export const modifyBName = (state, name) => { // B组件点击更改餐馆名称为 B餐馆
  state.resturantName = name
}

4、action

action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action,则需要执行store.dispatch

// 给action注册事件处理函数。当这个函数被触发时候,将状态提交到mutations中处理
export function modifyAName({commit}, name) { // commit 提交;name即为点击后传递过来的参数,此时是 'A餐馆'
  return commit ('modifyAName', name)
}
export function modifyBName({commit}, name) {
  return commit ('modifyBName', name)
}
 
// ES6精简写法
// export const modifyAName = ({commit},name) => commit('modifyAName', name)

5、module

module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。

6.在main.js中导入 store实例

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 这样就能全局使用vuex了
 components: { App },
 template: '<App/>'
})

7.对于1、3、4可以整合一个store/modules/user 的js进行配合封装

const user = {
 state: {
  resturantName: '飞歌餐馆' // 默认值
  // id: xxx 如果还有全局状态也可以在这里添加
  // name:xxx
 },
 
 mutations: {
  // 提交 mutations是更改Vuex状态的唯一合法方法
  modifyAName : (state, name) => { // A组件点击更改餐馆名称为 A餐馆
   state.resturantName = name // 把方法传递过来的参数,赋值给state中的resturantName
  },
  modifyBName : (state, name) => { // B组件点击更改餐馆名称为 B餐馆
   state.resturantName = name
  }
 },
 actions: {
  // 给action注册事件处理函数。当这个函数被触发时候,将状态提交到mutations中处理
  modifyAName({commit}, name) { // commit 提交;name即为点击后传递过来的参数,此时是 'A餐馆
   return commit ('modifyAName', name)
  },
  modifyBName({commit}, name) {
   return commit ('modifyBName', name)
  }
 
  // ES6精简写法
  //modifyAName:({commit},name) => commit('modifyAName', name)
 
 }
}
export default user

8.在组件A中,定义点击事件,点击 修改 名称,并把 名称在事件中用参数进行传递。

...mapactions 和 ...mapgetters都是vuex提供的语法糖,在底层已经封装好了,拿来就能用,简化了很多操作。

其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn',{参数}),mapActions中只需要指定方法名即可,参数省略。

...mapGetters(['resturantName'])相当于this.$store.getters.resturantName

A组件同理

<template>
 <div class="componentsA">
   <P class="title">组件A</P>
   <P class="titleName">餐馆名称:{{resturantName}}</P>
   <div>
      <!-- 点击修改 为 A 餐馆 -->
     <button class="btn" @click="modifyAName('A餐馆')">修改为A餐馆</button>
   </div>
   <div class="marTop">
     <button class="btn" @click="trunToB">跳转到B页面</button>
   </div>
 </div>
</template>
 
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
 name: 'A',
 data () {
  return {
  }
 },
 methods:{
   ...mapActions( // 语法糖
     ['modifyAName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
   ),
   trunToB () {
     this.$router.push({path: '/componentsB'}) // 路由跳转到B
   }
 },
 computed: {
   ...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName
 }
}
</script>

B组件同理

<template>
 <div class="componentsB">
   <P class="title">组件B</P>
   <P class="titleName">餐馆名称:{{resturantName}}</P>
   <div>
     <!-- 点击修改 为 B 餐馆 -->
     <button class="btn" @click="modifyBName('B餐馆')">修改为B餐馆</button>
   </div>
   <div class="marTop">
     <button class="btn" @click="trunToA">跳转到A页面</button>
   </div>
 </div>
</template>
 
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
 name: 'B',
 data () {
  return {
  }
 },
 methods:{
   ...mapActions( // 语法糖
     ['modifyBName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
   ),
   trunToA () {
     this.$router.push({path: '/componentsA'}) // 路由跳转到A
   }
 },
 computed: {
   ...mapGetters(['resturantName']) // 动态计算属性,相当于this.$store.getters.resturantName
 }
}
</script>

多组件的中状态改变之dispatch 和 commit 的用法和区别

vue store存储commit 和dispatch

dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)

commit:同步操作,写法:this.$store.commit('mutations方法名',值)

以上这篇对vuex中store和$store的区别说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
AngularJS快速入门
Apr 02 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
BootStrap中的表单大全
Sep 07 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
详解jenkins自动化部署vue
May 14 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 #Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 #Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 #Javascript
javascript实现支付宝滑块验证码效果
Jul 24 #Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 #Javascript
如何通过vscode运行调试javascript代码
Jul 24 #Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 #Javascript
You might like
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
ES6的新特性概览
2016/03/10 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
python实现电子产品商店
2019/02/26 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Python学习之os模块及用法
2020/06/03 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
我们的节日清明节活动总结
2014/04/30 职场文书
交通安全责任书范本
2014/07/24 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
停课通知书
2015/04/24 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
保姆聘用合同
2015/09/21 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang