vuex使用步骤,vue的安装和使用
本文介绍了VueX安装和使用的基本教程，通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
目录
1、安装vuex依赖包2、导入vuex包3、创建store对象4、将store对象挂载到vue实例中(1)、状态：(2)、突变：(3)、动作：(4)、Getters:
1、安装vuex依赖包
npm安装vuex -保存
2、导入vuex包
从“vuex”导入Vuex
Vue.use(Vuex)
3、创建 store 对象
导出默认的新Vuex。商店({
//状态存储全局共享的数据。
状态：{
计数：0
}
})
4、将 store 对象挂载到vue实例中
新Vue({
埃尔： #app ，
render: h=h(App)，
路由器，
//将创建的共享数据对象挂载到Vue实例中。
//所有组件，可以直接使用store获取全局数据。
商店
})
Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随相应的规则变化。
核心模块：状态、突变、动作、模块、Getters
在组件目录中创建一个新的Addition.vue文件：
模板
差异
H3最新的当前计数值是：/h3
按钮1/按钮
/div
/模板
减法. vue文件：
模板
差异
H3最新的当前计数值是：/h3
按钮-1/按钮
/div
/模板
打开App.vue文件，引入两个组件：
模板
差异
我的加法/我的加法
p - /p
我的减法/我的减法
/div
/模板
脚本
从导入附加内容。/组件/附加组件
从导入减法。/组件/减法
导出默认值{
组件：{
我的-加法:加法，
“我的减法”:减法
},
data () {
返回{}
}
}
/脚本
(1)、State：
状态提供了唯一的公告数据源，所有的共享数据都应该放入存储的状态中进行存储。我们需要保存的数据保存在这里，我们可以通过这个得到我们定义的数据。页面上的$store.state。
//创建存储数据源以提供唯一的公共数据
const store=new Vuex。商店({
状态：{
计数：0
}
})
组件访问存储中数据的第一种方式是：
这个。$store.state全局数据名称
组件访问存储中数据的第二种方式是：
//1.按需从vuex导入mapState函数。
从“vuex”导入{ mapState }
通过刚刚导入的mapState函数，将当前组件所需的全局数据映射到当前组件的计算属性：
//2.将全局数据映射到当前组件的计算属性。
计算值：{
.mapState([count])
}
打开store/index.js文件并定义count:
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态：{
计数：0
},
突变：{
},
动作：{
},
模块：{
}
})
回到Addition.vue文件，以第一种方式：
模板
差异
H3最新的当前计数值是：{{$store.state.count}}/h3
按钮@click=handleAdd 1/button
/div
/模板
回到Subtraction.vue文件，使用第二种方法：
模板
差异
H3最新的当前计数值是：{{count}}/h3
按钮-1/按钮
/div
/模板
脚本
从“vuex”导入{ mapState }
导出默认值{
data () {
返回{}
},
//计算属性
计算值：{
.mapState([Count]) //使用.扩展运算符来扩展资源属性中的计数。
}
}
/脚本
此时，效果图：
(2)、Mutations：
突变用于改变存储中的数据。只有突变中的函数才有权修改状态中的数据。突变与事件非常相似：每个突变都有一个字符串和回调函数(处理程序)的事件类型。但变异只允许同步函数，不能写异步代码。
商店数据只能通过突变来改变，不能直接操作商店中的数据。这样虽然操作有点繁琐，但可以集中监控所有数据的变化。定义：
//定义变化
const store=new Vuex .商店({
状态：{
计数：0
},
突变：{
添加（状态){
//变更状态
状态。计数
}
}
})
第一种触发方式：
//触发变化
方法：{
handleAdd () {
//触发突变的第一种方式
这个store.commit(add )
}
}
打开商店/索引。射流研究…文件，定义突变：
突变：{
添加（状态){
状态。计数
}
}
回到加法。某视频剪辑软件文件中触发：
模板
差异
h3当前最新的数数值为：{{$store.state.count}}/h3
按钮@click=handleAdd 1/button
/div
/模板
脚本
导出默认值{
方法：{
handleAdd () {
这个store.commit(add )
}
}
}
/脚本
此时点击一按钮，就可以看到数值变为1。
还可以在触发突变时传递参数：
//定义变化
const store=new Vuex .商店({
状态：{
计数：0
},
突变：{
addN(状态，步骤){
//变更状态
state.count=步骤
}
}
})
第一种触发方式：
//触发变化
方法：{
handleAdd () {
这个store.commit(addN ，3)
}
}
打开商店/索引。射流研究…文件，增加一个地址：
突变：{
添加（状态){
状态。计数
},
addN(状态，步骤){
state.count=步骤
}
}
回到加法。某视频剪辑软件文件中，增加一个普通的按钮并增加点击事件：
模板
差异
h3当前最新的数数值为：{{$store.state.count}}/h3
按钮@click=handleAdd 1/button
按钮@ click= handle add 2 N/button
/div
/模板
脚本
导出默认值{
data () {
返回{
数量：2
}
},
方法：{
handleAdd () {
这个store.commit(add )
},
handleAdd2 () {
//提交的作用，就是调用某个变化函数
这个store.commit(addN ，this.num)
}
}
}
/脚本
此时点击普通按钮就会每次增加2。
触发突变的第二种方式：
//1.从状态管理中按需导入地图突变函数
从" vuex "导入{地图突变}
通过刚才导入的地图突变函数，将需要的突变函数，映射为当前组件的方法方法：
//2.将指定的突变函数，映射为当前组件的方法函数：
方法：{
.mapMutations({add ， addN})
}
打开商店/索引。射流研究…文件，在突变增加一个子：
突变：{
添加（状态){
状态。计数
},
addN(状态，步骤){
state.count=步骤
},
子（州){
状态。计数-
}
},
回到减法。某视频剪辑软件文件中，给-1按钮增加点击事件：
模板
差异
h3当前最新的数数值为：{{count}}/h3
按钮@ click= handle sub -1/button
/div
/模板
脚本
从" vuex "导入{地图状态，地图突变}
导出默认值{
data () {
返回{}
},
//计算属性
计算值：{
.mapState([count]) //用.展开运算符把数数展开在资源属性里
},
方法：{
.地图突变([sub])，
handleSub () {
this.sub()
}
}
}
/脚本
这时刷新页面，点击-1按钮就会每次-1了。
打开商店/索引。射流研究…文件，增加一个子网：
突变：{
添加（状态){
状态。计数
},
addN(状态，步骤){
state.count=步骤
},
子（州){
状态。计数-
},
subN(状态，步骤){
状态。计数-=步骤
}
},
回到减法。某视频剪辑软件文件中，在增加一个同表示“发展”、“创造”或“状态的加剧”:widen deepen loosen的按钮，并添加点击事件：
button @ click= handle sub 2 -N/button
脚本
从" vuex "导入{地图状态，地图突变}
导出默认值{
方法：{
.mapMutations([sub ， subN])，
handleSub () {
this.sub()
},
handleSub2 () {
this.subN(2)
}
}
}
/脚本
这时点击同表示“发展”、“创造”或“状态的加剧”:widen deepen loosen按钮，每次就-2了。
下面有个需求，就是在点击一按钮后延迟一秒在显示变化后的数值。
注意：不要在突变函数中，执行异步操作。所以就需要用到了行动用于处理异步任务。
(3)、Actions：
行动用于处理异步任务。
如果通过异步操作变更数据，必须通过行动，但是在行动中还是要通过触发变化的方式间接变更数据。
定义：
//定义行动
const store=new Vuex .商店({
//.省略其他代码
突变：{
添加（状态){
状态。计数
}
},
动作：{
添加异步(上下文){
setTimeout(()={
context.commit(add )
}, 1000)
}
}
})
第一种方式触发：
//触发行动
方法：{
handleAdd () {
//触发行动的第一种方式
这个store.dispatch(addAsync )
}
}
打开商店/索引。射流研究…文件，增加一个addAsync:
动作：{
添加异步(上下文){
setTimeout(()={
//在行动中，不能直接修改状态中的数据
//必须通过context.commit()触发某个突变的函数才行
context.commit(add )
}, 1000)
}
}
回到加法。某视频剪辑软件文件中，增加一个一个异步的按钮并增加点击事件：
按钮@click=handleAdd3 1异步/按钮
脚本
导出默认值{
方法：{
handleAdd () {
这个store.commit(add )
},
handleAdd2 () {
//提交的作用，就是调用某个变化函数
这个store.commit(addN ，this.num)
},
handleAdd3 () {
这个store.dispatch(addAsync )
}
}
}
/脚本
这时点击一个异步按钮，可以实现延迟一秒后一的功能了。
触发行动异步任务时携带参数：
定义：
//定义行动
const store=new Vuex .商店({
//.省略其他代码
突变：{
addN(状态，步骤){
state.count=步骤
},
},
动作：{
addNAsync(上下文，步骤){
setTimeout(()={
context.commit(addN ，步骤)
}, 1000)
}
}
})
触发：
//触发行动
方法：{
handleAdd () {
//在调用派遣函数，触发行动时携带参数
这个store.dispatch(addNAsync ，5)
}
}
打开商店/索引。射流研究…文件，增加一个addNAsync:
动作：{
添加异步(上下文){
setTimeout(()={
//在行动中，不能直接修改状态中的数据
//必须通过context.commit()触发某个突变的函数才行
context.commit(add )
}, 1000)
},
addNAsync(上下文，步骤){
setTimeout(()={
context.commit(addN ，步骤)
}, 1000)
}
}
回到加法。某视频剪辑软件文件中，增加一个异步的按钮并增加点击事件：
异步/按钮
脚本
导出默认值{
方法：{
handleAdd4 () {
//在调用派遣函数，触发行动时携带参数
这个store.dispatch(addNAsync ，5)
}
}
}
/脚本
这时点击NAsync按钮，可以实现延迟一秒后5的功能。
触发行动的第二种方式：
//1.从状态管理中按需导入地图操作函数
从" vuex "导入{ mapActions }
通过刚才导入的地图操作函数，将需要的行动函数，映射为当前组件的方法方法：
//2.将指定的行动函数，映射为当前组件的方法函数
方法：{
.mapActions([addAsync ， addNAsync])
}
打开商店/索引。射流研究…文件，在行动增加一个子同步：
动作：{
添加异步(上下文){
setTimeout(()={
//在行动中，不能直接修改状态中的数据
//必须通过context.commit()触发某个突变的函数才行
context.commit(add )
}, 1000)
},
addNAsync(上下文，步骤){
setTimeout(()={
context.commit(addN ，步骤)
}, 1000)
},
子同步（上下文){
setTimeout(()={
语境。提交(“sub”)
}, 1000)
}
}
回到减法。某视频剪辑软件文件中，在增加一个-1个异步的按钮，并添加点击事件：
button @click=handleSub3-1异步/按钮
脚本
从" vuex "导入{地图状态，地图突变，地图操作}
导出默认值{
方法：{
.mapMutations([sub ， subN])，
.mapActions([subAsync])，
handleSub () {
this.sub()
},
handleSub2 () {
this.subN(2)
},
handleSub3 () {
this.subAsync()
}
}
}
/脚本
有一种更简单的方法：
button @click=subAsync-1个异步/button
脚本
从“vuex”导入{ mapState，mapMutations，mapActions }
导出默认值{
方法：{
.mapActions([subAsync])
}
}
/脚本
这达到了同样的效果。
用同样的思路实现-N的异步操作：
打开store/index.js文件并添加一个subNAsync:
动作：{
subNAsync(上下文，步骤){
setTimeout(()={
context.commit(subN ，step)
}, 1000)
}
}
回到Subtraction.vue文件，添加一个-N异步按钮：
button @ click= sub Async(3)-N Async/button
脚本
从“vuex”导入{ mapState，mapMutations，mapActions }
导出默认值{
方法：{
.mapActions([subAsync ， sub async ])
}
}
/脚本
此时点击-NAsync按钮，延时1秒后实现-3的功能。
(4)、Getters：
Getter用于处理存储中的数据以形成新数据。它并不修改状态中的源数据，只是充当一个包装器，把状态中的数据变成一个表单，然后返回。
Getter可以对存储中已有的数据进行处理，形成新的数据，类似于Vue的计算属性。
当存储中的数据发生变化时，Getter打包的数据也会发生变化。
定义：
//定义Getter
const store=new Vuex。商店({
状态：{
计数：0
},
getters: {
showNum: state={
Return 当前最新数量为[state.count]
}
}
})
使用getters的第一种方法是：
这个。$ store.getters.name
我们可以删除文本的内容，并用getters替换它：
打开store/index.js文件并定义getters:
getters: {
showNum (state) {
Return 当前最新数量为[state.count]
}
}
返回到Addition.vue文件进行修改：
H3 { { $ store . getters . shownum } }/H3
此时，页面被刷新，它已经成为getters中的内容。效果图如下：
使用getters的第二种方式：
从“vuex”导入{ mapGetters }
计算值：{
.mapGetters([showNum])
}
打开Subtraction.vue文件进行修改：
h3{{showNum}}/h3
脚本
从“vuex”导入{ mapState，mapMutations，mapActions，mapGetters }
导出默认值{
//计算属性
计算值：{
.mapState([Count])，//使用.扩展运算符来扩展资源属性中的计数。
.mapGetters([showNum])
}
}
/脚本
效果图：
就是这样。本文介绍了VueX安装和使用的基础教程。希望对大家的学习有帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。