对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显示随机图像或引用
Apr 21 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
DWR中各种java方法的调用
May 04 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 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 url地址栏传中文乱码解决方法集合
2010/06/25 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
js CSS操作方法集合
2008/10/31 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
vue 中几种传值方法(3种)
2019/11/12 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
财务总监岗位职责
2014/03/07 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书