一
1.什么是Vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解：即为组件间互相传递信息
状态自管理应用包含以下几个部分：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
2.什么情况使用Vuex？
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
image.png
个人理解：Action是进行异步操作的，组件可以直接commit,Devtools监听的是Commit
个人理解：actions直接操作state里的状态，但是没有了时间旅行devtools
二.
1.导入Vuex
1.1导入Vuex的几种方式
- CDN
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js">
</script>
- 模块导入(脚手架安装时可选)
npm install vuex --saveyarn add vuex
--------------------------------------------------------------------
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
1.2实例化
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
------------------------------------------------
const vm = new Vue({
store
el:'root'.
})
1.3在页面调用时候
{{$store.state.count}}
--------------------------------
//会显示0
1.4在浏览器调用
store.commit('increment')
console.log(store.state.count) // -> 1
———————————————————————————————————————————————
以下是视图------>状态管理的过程！！！！！！！！！！！！！！！
2.获取Vuex状态的方法（没有actions的时候,直接commit的情况）
以下都会使用此实例的对象
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
- 2.1.原方法
<div>{{count}}</div>
---------------------------------
const vm = new Vue({
computed:{
count(){
return this.$store.state.count
}
}
})
- 2.2.解构映射的方法
<div>{{count}}</div>
--------------------------------------
const {mapState} = Vuex
const vm = new Vue({
computed:mapState(['count'])
})
//将count映射出来
1.
3.获取Vuex的Mutations的方法（没有actions的时候,直接commit的情况）
- 状态管理
<div @click=''getMutations">{{count}}</div>
--------------------------------------
const {mapState} = Vuex
const vm = new Vue({
methods:{
getMutations(){
this.$store.commit('getMutations')
}
}
})
3.2..原方法（传参的话用原方法）
<div @click=''increment ">{{count}}</div>
//--------------------------------------
const {mapMutations} = Vuex
const vm = new Vue({
methods:matMutattions([
increment
])
})
4.有actions情况！！！！！！！！！！
const vm = new Vue({
methods:{
...matMutattions([
increment
])
}
有其他方法都可以添加，在方法里使用this.$store.dispatch(' ( actions里面的方法) ')！！
视图里的方法都需要dispatch,而不是原来的commit,此时commit操作在actions里面执行！！
总结
Vue注意的事项：先把所有的链都写出来，即使是actions是同步的！！
