vuex的概念及安装下载使用
Vuex是什么?
vuex 是一个专为 Vue.js v应用程序开发的状态管理模式。Vuex背后的基本思想就是我们所说的单向数据流。vuex是一个集中式的存储仓库【状态】,类似于 本地存储、数据库,vuex是vue的状态管理工具,它的功能主要是实现多组件间的状态【数据共享】。
什么是状态?
用一条数据去管理一个视图或是视图中的一部分,那么我们就将这个数据称之为状态
什么是状态管理?
用一条数据去管理一个视图或是视图中的一部分,那么我们就将这个数据称之为状态,这种管理的形式我们称之为 状态管理
什么情况下我应该使用 Vuex?
Vuex可以帮助我们管理共享状态,并附带了更多的框架概念,这需要对短期和长期效益进行权衡。
如果你不打算开发大型单页应用,使用vuex可能是繁琐冗余的。确实如此如果您的应用够简单,您最好不要使用Vuex。一个简单的state模式就够您所需了
但是,如果您需要构建一个中大型单页面应用,您可能会考虑如何更好的在组建外部管理状态 , Vuex就成了自然而然的选择
Vuex的工作流程
在vue的组件中通过dispatch来调用actions中的方法,在actions中通过commit来调用mutations中的方法,在mutations中可以直接操作state中的数据,只要state中的数据发生改变就会立刻响应到咱们的组件中。(附Vuex的流程图一份)
veux的安装使用
npm install vuex --save
在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex:
1、我们可以在项目中的src目录中新建===> store目录 ===>index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//生成对象
const store = new Vuex.Store({
state:{},
mutations:{},
actions:{},
getter:{}
})
//抛出对象
export default store;
2、在main.js中完成全局注册
import store from './store'
new Vue({
el:"#app",
router,
store, //**在这个地方一定要注册
components,
template: '<App/>'
})
当使用全局 script 标签引用 Vuex 时,不需要以上安装过程
Vuex核心概念:
state:是仓库 也就是储存数据的 相当于银行的金库
在组件中使用state中的数据 { this.$store.state }
mutations: 是唯一可以修改vuex中数据的选项。每个方法都有一个回调函数,回调函数有一个形参state 也就是咱么state中的数据
在组件中触发mutations中的方法{ this.$store.com mit("方法名字",参数) }
actions: 不能直接修改状态值调用mutations的方法 mutations修改状态值 可以包含异步操纵
在组件中触发actions的方法:{ this.$store.dispatch("方法名",参数) }
getters: 类似我们的计算属性 可以针对state中的数据做一些逻辑计算
在组件中使用方法:{ this.$store.getter.方法名 }
Module: Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
都是自己总结的,希望可以帮助到大家。有什么问题大家可以在评论区留言。