什么是vueX
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
vueX的组成
主要分为三个部分:
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
vueX使用场景
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。
一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
vueX应用
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。
由于项目刚刚开始,只是用来存储一些状态。后期如果遇到什么问题,会继续补全。
npm install --save vuex
上述是通过npm安装的vueX,引入:
import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex)
接着我们应该创建我们的仓库‘store’
const store = new Vuex.Store({
state:{
isChoose:true,
userInfo:{},
count:0,
all_url:'http://localhost:8080/#/home/'
// all_url:'https://ap.t-house.cn/',
// test_url:'https://ap.dev.t-house.cn/'
},
mutations:{
/*更改 Vuex 的 store 中的状态的唯一方法是提交
mutation。每一个mutation都有一个字符串的事件
类型(type)和一个回调函数(handler)。
mutation是同步操作*/
/*increment (state) {
// 变更状态
state.count++;
},*/
/*你不能直接调用一个 mutation handler。这个选项
更像是事件注册:“当触发一个类型为 increment 的
mutation 时,调用此函数。”要唤醒一个
mutation handler,你需要以相应的 type 调用
store.commit 方法:store.commit("")
*/
/*同时你也可以想commit传递额外参数,即载荷(payload)
*/
/*increments (state,n) {
// 变更状态
console.log(state.count)
state.count+=n;
}*/
},
actions:{
/*action和mutation类似。
区别在于:action是异步操作;
action提交并不直接改变状态
*/
increment(context){
console.log(context)
context.commit('increments')
}
}
})
mutation可以通过store.commit("increments")激活
action可以通过store.dispatch('increment')激活
在store中,我们可以声明一些全局变量,这样便于我们后期维护和修改。