第一次使用vuex

介绍：

vuex是一个状态管理器，也可以作为一个数据仓库使用。vuex可以将全局的数据做一个数据共享，例如，以前我们都是用session保存用户的登录状态或者用户信息，现在则直接可以使用vuex存储全局使用的数据。

安装：

npm install vuex --save

你可以在src文件夹下新建一个vuex的文件夹，在文件夹下新建一个store.js文件。

store.js代码：

图片来自技术胖的视频教程

页面引用：

图片来自技术胖的视频教程

mutation是作为改变vuex里面状态的值的方法使用的。例如，我们在在store.js里面写一个让count改变值的两个函数：

                const mutations={

                        add(state){

                                state.count++;

                        },

                        reduce(state){

                                state.count--;

                        }

                }

然后将mutations暴露出去。

                export default new Vuex.Store({

                        state,

                        mutations

                })

然后你就可以在你的模版中使用了：

来自技术胖的教程视频

vuex运行原理，大概如下图：

图片来自网络

Actions 执行异步操作如调用后台api 然后dispatch actions 方法 再commit mutations 再对state 进行修改

Mutataions 执行的是同步的操作。可以直接使用改变state

state 作为状态，改变后会直接作用到View上