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

站长资源 2024/11/24 佚名

44 1538 44

DDR爱好者之家 Design By 杰米

这里写自定义目录标题

<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 }"color: #ff0000">补充知识：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的区别说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vuex,store,$store

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“对vuex中store和$store的区别说明”

暂无评论...

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

解决VUEX的mapState/...mapState等取值问题

小程序实现简单语音聊天的示例代码

评论“对vuex中store和$store的区别说明”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接