Vuex的todos案例

项目创建

创建的时候记得勾上vuex

vue create vuex-todos 

配置App根组件

<template>
  <div id="app">
    <a-input placeholder="请输入任务" class="my_ipt" />
    <a-button type="primary">添加事项</a-button>

    <a-list bordered :dataSource="list" class="dt_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- 复选框 -->
        <a-checkbox>{
   {
    item.info }}</a-checkbox>
        <!-- 删除链接 -->
        <a slot="actions">删除</a>
      </a-list-item>

      <!-- footer区域 -->
      <div slot="footer" class="footer">
        <!-- 未完成的任务个数 -->
        <span>0条剩余</span>
        <!-- 操作按钮 -->
        <a-button-group>
          <a-button type="primary">全部</a-button>
          <a-button>未完成</a-button>
          <a-button>已完成</a-button>
        </a-button-group>
        <!-- 把已经完成的任务清空 -->
        <a>清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

<script>

export default {
   
  name: 'app',
  data () {
   
    return {
   
    }
  },
}
</script>

<style scoped>
#app {
   
  padding: 10px;
}

.my_ipt {
   
  width: 500px;
  margin-right: 10px;
}

.dt_list {
   
  width: 500px;
  margin-top: 10px;
}

.footer {
   
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

配置main.js

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

// 1. 导入 ant-design-vue 组件库
import Antd from 'ant-design-vue'
// 2. 导入组件库的样式表
import 'ant-design-vue/dist/antd.css'
import store from '@/store/index.js'

Vue.config.productionTip = false
// 3. 安装组件库
Vue.use(Antd)

new Vue({
   
  render: h => h(App),
  store
}).$mount('#app')

配置store的index.js

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

import axios from 'axios'
Vue.use(Vuex)

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

在public下面新建一个list .json 渲染页面用的

[
    {
   
      "id": 0,
      "info": "Racing car sprays burning fuel into crowd.",
      "done": true
    },
    {
    "id": 1, "info": "Japanese princess to wed commoner.", "done": false },
    {
   
      "id": 2,
      "info": "Australian walks 100km after outback crash.",
      "done": true
    },
    {
    "id": 3, "info": "Man charged over missing wedding girl.", "done": false },
    {
    "id": 4, "info": "Los Angeles battles huge wildfires.", "done": false }
  ]

初始渲染页面

app根组件定义了一个created，只要页面加载就会执行created，就只直接通过dispatch调用这个异步函数getList

//去调用actions里面的getList方法，浏览器只要加载页面就会触发created
created () {
   
    this.$store.dispatch('getList')
  }