vuex使用的大致步骤,vuex是怎么实现的
本文主要介绍使用vuex的步骤，帮助你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。
一、使用Vuex的目的
实现多组件状态管理。当多个组件需要数据共享时，Vuex是个好帮手。
二、Vuex 的五大核心
其中状态和突变是必须的，其他可以根据需求添加。
1.state
负责状态管理，类似于vue中的数据，用来初始化数据。
2.mutation
用于修改状态中的数据，由提交触发。
3.action
调度可以触发异步处理，但不能直接修改状态。首先通过组件中的dispatch触发动作，然后通过action函数中的commit触发变异，通过变异修改状态值。
4.getter
vue中的计算属性(相当于VUE中的计算属性)取决于州值。一旦状态值发生变化，getter就会重新计算，也就是当一个数据依赖于另一个数据时，就会使用getter。
5.module
模块化管理
三、Vuex 怎么用
1.首先当然要安装啦 (假设你已经安装了vue)
npm安装vuex
2.引入并使用Vuex
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
3.实例化一个Vuex对象--Store状态机 并抛出
const store=new Vuex。商店({})
出口默认商店
4.在main.js中引入并注入Vuex
从“vue”导入Vue
从导入应用程序。/App.vue
从导入存储。/商店
新Vue({
render: h=h(App)，
商店
}).$ mount(“# app”)
5.通过this.$store访问Vuex的数据
至此，Vuex已经准备完成，接下来根据自己的需求添加数据~
四、示例代码
1.首先准备至少两个组件，不然怎么数据共享呢
模板
差异
我是组件1。
/div
/模板
脚本导出默认值{
}/脚本
样式范围
/风格
模板
差异
我是组件2。
/div
/模板
脚本导出默认值{
}/脚本
样式范围
/风格
2.在store.js中写Vuex相关代码
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
const store=new Vuex。商店({
状态：{}，//状态管理
突变：{}，//修改状态
操作：{}，//异步操作
Getters:{}，//计算属性
模块：{} //模块
})
导出默认存储
注意：不要忘记将store注入main.js(参考上面第三点的第四点)
3.假设咱们现在需要共享一个数据data,初始值为0
const store=new Vuex。商店({
状态：{
数据：0
}
})
4.组件1和组件2都可以通过$store拿到data
差异
我是组件1。
{ {这个。$store.state.data}} //数据的值将在浏览器中显示在这里。
/div
差异
我是组件2。
{ {这个。$store.state.data}} //数据的值将在浏览器中显示在这里。
/div
5.那么怎么修改data呢，这时候就需要mutation出马了
Mutation本质上是一个函数，它在被调用时接收state和params参数。
突变：{
changeDataMut(state，params){
state.data=params
}
}
6.mutation有了，接下来就需要在组件中调用它，记得要用commit触发
模板
差异
我是组件1。
按钮@click=changeData 更改数据/按钮
/div
/模板
脚本导出默认值{
data(){
返回{
changeData(){
//触发变异并通过提交传递参数
这个。$ store.commit (ChangeDataMut ，10)//此时组件1和组件2中的数据都是10。
}
}
}
}/脚本
7.action怎么用？
动作也是一种功能。
如前所述，动作不能直接修改状态。首先要在组件中通过dispatch触发动作，然后在动作函数中通过commit触发变异，通过变异修改状态值。
注意动作的参数
动作：{
Changeact (context，params) {//context是一个对象，我们从这个对象中解构我们需要的提交方法。
让{commit}=上下文
提交( changeDataMut ，params)
}
}
此时，您可以在组件中触发该操作。注意使用调度。
模板
差异
我是组件2。
按钮@click=changeData 更改数据/按钮
/div
/模板
脚本导出默认值{
data(){
返回{
changeData(){
//通过分派和传递参数触发动作
这个。$ store.dispatch (ChangedataAct ，100)//此时，数据变为100，组件1和组件2同步。
}
}
}
}/脚本
8.getter的用法
Getter根据状态值计算属性，并要求返回。
现在我们假设一个值double，这个值是数据的两倍，并且会随着数据的变化而变化。
getters:{
doubleGet(州){
返回state.data*2
}
}
我们可以在组件中使用它。
差异
我是组件2。
{ {这个。$store.getters.doubleGet}}
/div
以上就是vuex的使用步骤细节。更多关于vuex的使用方法，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。