关于html:vuex基础

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);
}
}