最新消息: 关于Git&GitHub 版本控制你了解多少?
您现在的位置是:群英 > 服务器 > 云计算 >
vuex是什么?有哪些优势?
CSDN发表于 2020-09-14 15:32 次浏览

 

vuex作为vue官方出品的状态管理框架,以及其简单API设计、便捷的开发工具支持,在中大型的vue项目中得到很好的应用。作为flux架构的后起之秀,吸收了前辈redux的各种优点,完美的结合了vue的响应式数据,那么Vuex到底是什么呢?下面一篇文章我们来详细解读一下就明白了。

1.Vuex是什么?

Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。

2.使用Vuex统一管理状态的好处

  1. 能够在vuex中集中管理共享的数据,易于开发和后期维护
  2. 能够高效的实现组件直接得数据共享,提高开发效率
  3. 储存在vuex中的数据都是响应式的,能够实现数据与页面的同步

3.什么样的数据储存在Vuex中

一般情况下,只有组件之间共享的数据,才有必要储存在vuex中,对于组件的私有数据,依旧储存在自身的data中即可。

4.下载和使用Vuex

  1. 下载
  • 1       npm install vuex -S //S代表生产环境使用
  1. 导入vuex包 这个是在main.js中导入
  • 1   import Vuex from 'vuex'
  • 2   Vue.use(Vuex)
  1. 创建store对象
  • 1   const store = new Vuex.Store({
  • 2    state:{count:0} //state中存放的就是全局共享的数据
  • 3   }) 
  1. 将store对象挂载到vue实例中
			

  • 1   new Vue({
  • 2    el:"#app",
  • 3    render:h => h(app), //渲染app和组件
  • 4   router, //挂载路由
  • 5   store 
  • 6   })

5.Vuex的核心概念

  • State
  • Mutation
  • Action
  • Getter
State: 提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行储存
  • 1   // 创建store数据源,提供唯一的公共数据
  • 2   const store = new Vuex.Store({
  • 3    state:{count:0}
  • 4   })
mutations: mutations里面是如何更改state中状态的逻辑。更改Vuex中的state的唯一方法是,提交mutation,即store.commit(‘increment’)。
actions: 因为mutations中只能是同步操作,但是在实际的项目中,会有异步操作,那么actions就是为了异步操作而设置的。这样,就变成了在action中去提交mutation,然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数,而mutations则是用commit函数。
Getter: 有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。此时可以用到getters,getters可以看作是store的计算属性,其参数为state。
const store = new Vuex.Store({
  state: {
    todos: [
      {id: 1, text: 'reading', done: true},
      {id: 2, text: 'playBastketball', done: false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});
	router,              //挂载路由
标签:vuex是什么
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐