简单的vuex 的使用案例笔记

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state: {
 night: true,
 text: '白天',
 className: 'morning'
 },
 mutations: {
 increment (state) {
  state.night = !state.night;
  state.text = state.night === true ? '晚上' : '白天';
  state.className = state.night === true ? 'night' : 'morning';
 }
 }
})

// 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 router from './router'
import store from './store' // 会找index.js 

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 注入根组件，其他子组件 都可以引用
 template: '<App/>',
 components: { App }
})

<div class="header" :class="model">

computed: {
 model() {
  return this.$store.state.className // 是ninght 还是 morning
 }
 },

<div class='modal' @click="changeModel">
 <div class="avatar">
 <img src="../../assets/img/logo.png" width="18" height="18">
 </div>
 <div class="name">
 {{currentModel}}
 </div> 
 <!-- vuex 相当于全局注入 vuex 然后取这里面的值 -->
</div>

computed: {
 currentModel () {
  return this.$store.state.text
 }
 },
 methods: {
 changeModel () {
  // document.body.className='night'
  this.$store.commit('increment')
 }
 }