1.Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解：管理应用的所有组件的状态，我们可以理解为在所有组件中都能用到的一个变量，而且这个变量状态要在发生变化后保持一致。
2.使用Vuex基础
1、安装依赖命令：npm install vuex --save 可以简写为： npm i vuex -S
2、引入和使用
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
3.具体使用
1、创建一个 store，里面有一个主文件index.js。仅需要提供一个初始 state 对象和一些 mutation
如文档所说这个应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
食用前请先引入如2-2
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
})
2.在main.js中引入这个store的indexjs
import store from ‘./store/index‘
new Vue({
el: ‘#app‘,
router,
store, //将store挂载到vue上,通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到
template: ‘<App/>‘,
components: { App }
})
3.在组件中调用
<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
new Vue({
el: ‘#app‘,
computed: {
count () {
return this.$store.state.count
}
},
methods: {
increment () {
this.$store.commit(‘increment‘)
},
decrement () {
this.$store.commit(‘decrement‘)
}
}
})
4.最简单的对vuex中的count进行加减就已经实现了，那么问题来了，竟然使用state和mutation就能实现，那action和getter这些到底有什么用呢？
4.分析一波
1.state:里面是我们的数据源，也就是我们使用的变量
2.mutations:则是我们的操作,也就是修改状态的操作
@state:组件的数据展示方法
1、计算属性中computed:
computed:{
count () {
return this.$store.state.count
}
}
2、计算属性中computed,mapState 辅助函数
import {mapState} from ‘vuex‘;
computed:{
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
count:state=>state.count
})
}
3、计算属性中computed,mapState 辅助函数
import {mapState} from ‘vuex‘;
computed:{
...mapState(["count"])
}
未完待续。。。。。
@mutations:修改状态的操作,主要是通过--this.$store.commit(‘decrement‘)
@1.<button @click="increment">+</button>
@2.increment () {
this.$store.commit(‘increment‘)
}
@3.mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
当然this.$store.commit也可以传额外的参数比如说--this.$store.commit(‘increment‘ ,10 )
---文档中说即 mutation 的 载荷（payload），但在大多数情况下，载荷应该是一个对象，，这样可以包含多个字段并且记录的 mutation 会更易读
@1.<button @click="increment">+</button>
@2.increment () {
this.$store.commit(‘increment‘,m)
}
@3.mutations: {
increment: (state,m) => state.count+=m,
decrement: state => state.count--
}
在组件中提交 Mutation---什么意思呢？
文档上说：1.使用 this.$store.commit(‘xxx‘) 提交 mutation；
2.使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
上面例子使用的是this.$store.commit(‘xxx‘) 提交 mutation，现在我们使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
@1.<button @click="increment">+</button>
@2.mutations: {
increment: (state,m) => state.count+=m,
decrement: state => state.count--
}
@3.import { mapMutations } from ‘vuex‘
methods:{
...mapMutations(
[ ‘increment‘,‘decrement‘ ]
)
}
这样看起来是不是感觉更好了呢。。。
5.使用常量替代 Mutation 事件类型---mutation.type.js
// mutation-types.js
export const SOME_MUTATION = ‘SOME_MUTATION‘
// store.js
import Vuex from ‘vuex‘
import { SOME_MUTATION } from ‘./mutation-types‘
const store = new Vuex.Store({
state: { ... },
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SOME_MUTATION] (state) {
// mutate state
}
}
})
Mutation 必须是同步函数, mutation 中混合异步调用会导致你的程序很难调试。例如，当你能调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念,为了处理异步操作，让我们来看一看 Action。
6.Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
actions: {
addAction(context){
context.commit(‘add‘,10)
},
//ES2015 的 参数解构 来简化代码
reduceAction({commit}){
commit(‘reduce‘)
}
}
1.分发 Action
1.Action 通过 store.dispatch 方法触发：
store.dispatch(‘increment‘)
2.Actions 支持同样的载荷方式和对象方式进行分发：
// 以载荷形式分发 store.dispatch(‘incrementAsync‘, { amount: 10 })
// 以对象形式分发 store.dispatch({ type: ‘incrementAsync‘, amount: 10 }) 2.在组件中分发 Action
1.使用 this.$store.dispatch(‘xxx‘) 分发 action；
2.使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
@1.<button @click="addAction">+</button>
@2.import { mapActions } from ‘vuex‘
methods:{
...mapActions(
[ ‘addAction‘,‘reduceAction‘ ]
)
}
@3.actions:{
addAction(context){
context.commit(‘add‘)
},
reduceAction({commit}){
commit(‘reduce‘)
}
}
3.组合 Action----这部分本人没有理解透，就不误人子弟了
想了解请看文档 https://vuex.vuejs.org/zh-cn/actions.html
7.Getter----可以认为是 store 的计算属性。
解释：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
@1.<button @click="addAction">+</button>
@2.import { mapGetters } from ‘vuex‘
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters(["count"])
}
@3.var getters={
count:function(state){
return (state.count<10 && state.count>0)?‘0‘+state.count:state.count;
}
}
8.Module
1.不多说，上代码
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }
const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } }
const store = new Vuex.Store({
modules: { a: moduleA, b: moduleB }
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
2.本来是 this.$store.state.count =》this.$store.state.a.count
computed:{
// ...mapState(["count"]),
count () {
return this.$store.state.a.count
},
// ...mapState({
// count:state=>state.a.count //理解为传入state对象，修改state.count属性
// })
}