vuex
Vuex是什么呢？它是Vue的状态管理模式，在应用vue的时候，须要在vue中各个组件之间传递值是很苦楚的，在vue中咱们能够应用vuex来保留咱们须要治理的状态值，值一旦被扭转，所有援用该值的中央就会自动更新。是不是很不便，很好用呢？
vuex是专门为vue.js设计的状态管理模式，集中式存储和管理应用程序中所有组件的状态，vuex也集成了vue的官网调式工具，一个vuex利用的外围是store，一个容器，store蕴含了利用中大部分状态。
那么咱们在什么时候利用vuex呢？vuex也不是轻易乱用的，小型简略的利用就不那么适合了，因为用了Vuex是繁琐多余的，更适宜应用简略的store模式；对于vuex更加实用于中大型单页利用：多个视图应用于同一状态，不同视图须要变更同一状态。
vuex状态治理
实现组件间数据共享
集中式存储和管理应用程序中所有组件的状态
一个 Vuex 利用的外围是 store（仓库，一个容器），store蕴含着你的利用中大部分的状态 (state)。
传参的办法对于多层嵌套的组件来说，是十分繁琐的，并且对于兄弟组件间的状态传递无能为力；采纳父子组件间接援用或者通过事件来变更和同步状态的多份拷贝，通常会导致无奈保护的代码。
什么状况下我应该应用 Vuex
实用于：中大型单页利用，不论在哪个组件，都能获取状态/触发行为
解决问题如下：
① 多个视图应用于同一状态：
传参的办法对于多层嵌套的组件将会十分繁琐，并且对于兄弟组件间的状态传递无能为力
② 不同视图须要变更同一状态：
采纳父子组件间接援用或者通过事件来变更和同步状态的多份拷贝，通常会导致无奈保护的代码
装置命令：
在我的项目文件夹下vue install vuex
- vuex 外面 actions 只是一个架构性的概念，并不是必须的
- Action 提交的是 mutation，而不是间接变更状态
- Mutation：必须同步执行
- Action：能够异步,但不能间接操作State
创立一个vue我的项目，输出vue int webpack web，装置vuex，命令：npm install vuex –save。
store，index.js
import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
// 应用vuex
Vue.use(Vuex);
// 创立Vuex实例
const store = new Vuex.store({
})
export default store // 导出store
main.js
import Vue from 'Vue'
import App from './App'
import router from './router'
import store from '.store'
Vue.config.productiontip = false
new Vue({
el: '#app',
store,
router,
components: {App},
...
})
State，能够在页面通过this.$store.state来获取咱们定义的数据：
import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
// 应用vuex
Vue.use(Vuex);
// 创立Vuex实例：
const store = new Vuex.Store({
state: {
count: 1
}
})
export default store // 导出store
{{this.$store.state.count}}
Getters相当于vue中的computed计算属性，getter的返回值依据它的依赖被缓存起来，且只有当它的依赖值产生扭转时才会从新计算。
Getters能够用于监听，state中的值的变动，返回计算后的后果。
{{this.$store.getSateCount}}
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 1;
},
getters: {
getStateCount: function(state){
return state.count+1;
}
}
Mutations
{{this.$store.state.count}}
<button @click="addFun">+</button>
<button @click="reductionFun">-</button>
methods: {
addFun() {
this.$store.commit("add");
},
reductionFun() {
this.$store.commit("reduction");
}
}
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 创立Vuex实例
const store = new Vuex.store({
state: {
count: 1
},
getters: {
getStateCount: function(state){
return state count+1;
}
},
mutations: {
add(state) {
state.count = state.count+1;
},
reduction(state){
state.count = state.count-1;
}
}
})
export default store // 导出store
Actions:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 1;
},
getters: {
getStateCount: function(state){
return state.count+1;
}
}
mutations: {
add(state) {
state.count = state.count+1;
},
reduction(state) {
state.count = state.count-1;
}
},
actions: {
addFun(context) {
context.commit("add");
},
reductionFun(context) {
context.commit("reduction");
}
}
// vue
methods: {
addFun() {
this.$store.dispatch("addFun");
// this.$store.commit("add");
},
reductionFun() {
this.$store.dispatch("reductionFun");
}
}
传值：
methods: {
addFun() {
this.$store.dispatch("addFun");
// this.$store.commit("add");
},
reductionFun() {
var n = 10;
this.$store.dispatch("reductionFun", n);
}
}
mutations: {
add(state) {
state.count = state.count+1;
},
reduction(state,n) {
state.count = state.count-n;
}
},
actions: {
addFun(context) {
context.commit("add");
},
reductionFun(context,n) {
context.commit("reduction",n);
}
}
发表回复