const state = { 
  blogTitle: '迩伶贰blog',
  views: 10,
  blogNumber: 100,
  total: 0,
  todos: [
    {id: 1, done: true, text: '我是码农'},
    {id: 2, done: false, text: '我是码农202号'},
    {id: 3, done: true, text: '我是码农202号'}
  ]
}

const actions = {
  addViews ({commit}) {
    commit('addViews')
  },
  clickTotal ({commit}) {
    commit('clickTotal')
  },
  blogAdd ({commit}) {
    commit('blogAdd')
  }
}

const getters = {
  getToDo (state) {
    return state.todos.filter(item => item.done === true)
    // filter 迭代过滤器 将每个item的值 item.done == true 挑出来， 返回的是一个数组
  }
}

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

Vue.use(Vuex)

const state = { 
  blogTitle: '迩伶贰blog',
  views: 10,
  blogNumber: 100,
  total: 0,
  todos: [
    {id: 1, done: true, text: '我是码农'},
    {id: 2, done: false, text: '我是码农202号'},
    {id: 3, done: true, text: '我是码农202号'}
  ]
}

const actions = {
  addViews ({commit}) {
    commit('addViews')
  },
  clickTotal ({commit}) {
    commit('clickTotal')
  },
  blogAdd ({commit}) {
    commit('blogAdd')
  }
}

const mutations = {
  addViews (state) {
    state.views++
  },
  blogAdd (state) {
    state.blogNumber++
  },
  clickTotal (state) {
    state.total++
  }
}

const getters = {
  getToDo (state) {
    return state.todos.filter(item => item.done === true)
    // filter 迭代过滤器 将每个item的值 item.done == true 挑出来， 返回的是一个数组
  }
}


export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})

// 将四大金刚挂载到 vuex的Store下

import Vue from 'vue'
import App from './App'
import router from './router/router.js'

// 引入 状态管理 vuex
import store from './store'

// 引入elementUI
import ElementUI from 'element-ui'
// 引入element的css
import 'element-ui/lib/theme-chalk/index.css'
// 引入font-awesome的css
import 'font-awesome/css/font-awesome.css'

// 引入自己的css
import './assets/css/custom-styles.css'
Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

<template>
  <div>
    <h4>vuex的状态管理数据</h4>
    <h5>博客标题</h5>
    <i>
      {{this.$store.state.blogTitle}}
    </i>
    <h5>todos里面的信息</h5>
    <ul>
      <li v-for = "item in todosALise" :key="item.id">
        <span>{{item.text}}</span> <br>
        <span>{{item.done}}</span> 
      </li>
    </ul>
    <h5>初始化访问量</h5>
    <p>
       mapState方式 {{viewsCount}}；<br>
       直接使用views {{this.$store.state.views}}
    </p>
    <h4>blogNumber数字 </h4>
    <span>state中blogNumber：{{this.$store.state.blogNumber}}</span>
    <h4>总计</h4>
    <span>state中total：{{this.$store.state.total}}</span>
    <p>
      <button @click="totalAlise">点击增加total</button>
    </p>
    
  </div>
</template>

<style>

</style>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default {
  data () {
    return {
      checked: true
    }
  },
  created () {
    // this.$store.dispatch('addViews') // 直接通过store的方法 触发action, 改变 views 的值
    this.blogAdd() // 通过mapActions 触发mutation 从而commit ，改变state的值
  },
  computed: {
    ...mapState({
      viewsCount: 'views'
    }),
    ...mapGetters({
      todosALise: 'getToDo' // getToDo 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 todosALise
    })
  },
  methods: {
    ...mapMutations({
      totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是重新定义的一个别名方法，本组件直接调用这个方法
    }),
　　 ...mapActions({

      blogAdd: 'blogAdd' // 第一个blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，后面一个blogAdd 才是actions里面函数方法名称

    }) 

} } </script>