vuex是用来干嘛的?

vuex是什么?是用来干嘛的?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,是基于vue框架的一个状态管理库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。

vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。

Vuex的使用

在vue-cli以安装Vuex的情况下,直接引用。

没有的话的步骤:

1、安装Vuex,npm install vuex --save 或 cnpm install vuex --save进行安装

2、在src下新建一个名为vuex的文件夹

3、vuex文件夹里面新建一个store.js

1.png

4、在刚刚创建的store.js引入vue 引入vuex并且使用use Vuex

2.png

5、定义数据

3.png

6、定义方法

4.png

7、实例化 Vuex.store

5.png

8、暴露

6.png

完整代码如下:

7.png

组件里如何使用vuex?

1、引入store

import   store  from  “../vuex/store.js”

2、注册

export default{
data(){
    return {             
      msg:'我是一个home组件',
       value1: null,
    }
},
store,
methods:{
    incCount(){
              this.$store.commit('incCount');  /*触发 state里面的数据*/
    }
}
}

3、获取state里面的数据

this.$store.state数据

4、触发 mutations 改变 state里面的数据

this.$store.commit('incCount');

8.png

9.png

10.png

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是vuex是用来干嘛的?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏