对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 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
JavaScript DOM基础
Apr 13 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
Js类的构建与继承案例详解
Sep 15 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
Zerg兵种介绍
2020/03/14 星际争霸
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
js常用DOM方法详解
2017/02/04 Javascript
JSONP基础知识详解
2017/03/19 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
机电专业体育教师求职信
2013/09/21 职场文书
物流仓储实习自我鉴定
2013/09/25 职场文书
服务之星获奖感言
2014/01/21 职场文书
2014组织生活会方案
2014/05/19 职场文书
信用卡工资证明格式
2014/09/13 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
党员自评材料范文
2014/12/17 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
mysql全面解析json/数组
2022/07/07 MySQL