vuex -- 学习1

安装 vuex

NPM

npm install vuex --save

开始

新建store文件 ，在store文件夹中创建store.js文件：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)        //  这个一定一定不要忘记

// ============================  写法一
const state = {
  num: 15       // 公用的状态
}
const mutations = {
  add(state) {
    state.num++
  },
  minus(state) {
    state.num--
  }
}
export default new Vuex.Store({
  state,
  mutations
})

//================================== 写法二
export default new Vuex.Store({
  state: {
    num: 15
  },
  mutations: {
  	add: state => state.count++,
    minus: state => state.count--
  }
})

main.js 文件中

import Vue from 'vue'
import store from './store/store.js'

new Vue({
  el: '#app',
  store,   //  把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  render: h => h(App)
})

在App.vue中使用
在所有组建中可以用this.$store.state.num 访问数据

<div id="app">
    {{$store.state.num}}    
    <div class="">
      <button type="button" name="buttonAdd" @click="$store.commit('add')">加一个</button><!-- vue2.0  的写法 -->
      <button type="button" name="buttonAdd" @click="$store.commit('minus')">减一个</button>
    </div>
  </div>

页面渲染

说明：
不可以直接修改store.state中的num值，要通过store.commit中的方法显示的修改store,state.num的值

store.commit('add')  // 为了可以明确清晰地追踪到store.state.num值的变化