vuex的使用方法（一）

学习vuex之前，我们需要知道vuex是什么？

定义：每一个vuex引用的核心就是store（仓库） store基本上就是一个容器，它包含着你的应用中的大部分状态。

vuex和全局对象的不同点

1、vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应的得到高效的更新。

2、你不能直接改变store中的状态，改变store中的状态的唯一途径就是显示的提交（commit） mutaion ，这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好的了解我们的应用。

最简单的Store

首先，我们需要先在项目中安装vuex， npm install  vuex  --save--dev

安装了vuex后，让我们来创建一个store，仅需提供一个初始state对象 

const store =  new Vuex.Store({
  state: {

      count: 0

   },

 

现在，你可以通过$store.state.count来获取状态对象

到目前为止，我们就创建了一个简单的实例

当然，为了以后的维护方便，更好的管理vuex，我们需要对vuex做一些调整。

1、在src目录创建vuex文件夹，然后在该文件内创建store.js文件。然后在文件中引用vue和vuex

       import  Vue from 'vue'

       import Vuex from 'vuex'

然后使用Vuex

 Vue.use(Vuex);

创建一个常亮对象

const state  =  {

     isRead : false 

}

让外部引用vuex

export  default new Vuex.store({

  state

})

然后在main.js 中引入store.js

import store from '@/vuex/store'

4、在实例化对象时，加入引入的store对象：

new Vue ({

  el: '#app',

   router,

    store,

  template: '<App/>',

  comments: { app }

})