一

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是同步的！！