vuex 状态管理模式 最简单的demo

vuex可以这样理解：他就是一个可供所有页面调用的全局数据。

第一步 下载vuex插件
在cmd中输入 npm install vuex --save 下载

第二步：
在src文件路劲下创建一个叫 store的文件夹 在store文件夹下创建index.js文件。
第三步：
在store文件夹下的inndex.js文件写

import Vue from 'vue'
import Vuex  from 'vuex'

Vue.use(Vuex)
//创建Vuex实例

export default new Vuex.Store({
state:{
num:1
//这个num就是全局属性 可可在任何页面调用它
}，
mutations：{
}
})

第四部 在main.js文件中 引入store文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

import store from '@/store'  //引入store 并挂载带vue实例中

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',

store,// store挂载

  components: { App },
  template: '<App/>'
})

这一步完成后 num这个全局属性就可以在页面中调用了

第五步 使用num这个全局属性的方法
在我的demo.vue中使用

<div>
  这是一个num的值：  {{$store.state.num}}