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

2023-07-19 22:57:04 149

这里写自定义目录标题

{{$store.state.userName}}
{{store.state.userName}}
{{this.store.state.userName}}
{{this.$store.state.userName}}

1、$store是挂载在Vue实例上的（即Vue.prototype），而组件也其实是一个Vue实例（所有组件都是实例，每个组件都是一个vue实例，所有的Vue组件都是Vue实例：一个Vue应用由一个通过newVue创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成，也就是说：组件放到根组件中使用）在组件中可使用this访问原型上的属性，template拥有组件实例的上下文，可直接通过{{KaTeXparseerror:Expected'EOF',got'}'atposition22:…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的官方调试工具devtoolsextension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。

二、状态管理核心

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

开始使用vuex，新建一个sotre文件夹，分开维护actionsmutationsgetters

1、state

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

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

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

importVuefrom'vue'
importVuexfrom'vuex'
import*asgettersfrom'./getters'//导入响应的模块，*相当于引入了这个组件下所有导出的事例
import*asactionsfrom'./actions'
import*asmutationsfrom'./mutations'

Vue.use(Vuex)
//首先声明一个需要全局维护的状态state,比如我这里举例的resturantName
conststate={
resturantName:'飞歌餐馆'//默认值
//id:xxx如果还有全局状态也可以在这里添加
//name:xxx
}
//注册上面引入的各大模块
conststore=newVuex.Store({
state,//共同维护的一个状态，state里面可以是很多个全局状态
getters,//获取数据并渲染
actions,//数据的异步操作
mutations//处理数据的唯一途径，state的改变或赋值只能在这里
})

exportdefaultstore//导出store并在main.js中引用注册。

另种封装

importVuefrom'vue'
importVuexfrom'vuex'
importuserfrom'./modules/user'
importgettersfrom'./getters'
Vue.use(Vuex)
/*eslint-disableno-new*/
conststore=newVuex.Store({
modules:{
user//包含state、actions、mutations
},
getters
})
exportdefaultstore

2、getter

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

//获取最终的状态信息

exportconstresturantName=state=>state.resturantName

3、mutation

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

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

4、action

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

//给action注册事件处理函数。当这个函数被触发时候，将状态提交到mutations中处理
exportfunctionmodifyAName({commit},name){//commit提交；name即为点击后传递过来的参数，此时是'A餐馆'
returncommit('modifyAName',name)
}
exportfunctionmodifyBName({commit},name){
returncommit('modifyBName',name)
}

//ES6精简写法
//exportconstmodifyAName=({commit},name)=>commit('modifyAName',name)

5、module

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

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

importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
importstorefrom'./store'

Vue.config.productionTip=false

/*eslint-disableno-new*/
newVue({
el:'#app',
router,
store,//这样就能全局使用vuex了
components:{App},
template:''
})

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

constuser={
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餐馆
returncommit('modifyAName',name)
},
modifyBName({commit},name){
returncommit('modifyBName',name)
}

//ES6精简写法
//modifyAName:({commit},name)=>commit('modifyAName',name)

}
}
exportdefaultuser

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

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

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

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

A组件同理

B组件同理

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

vuestore存储commit和dispatch

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

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

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

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

热门推荐

随机推荐