Personal Website Addresswww.wenghaoping.com

Vue + Express + Mongodb build please support more.

preface

I used vuex incorrectly all the time. This time I just need to sort out the project address. Let’s create a directory named Store under SRC

Respectively under the store to create four js file actions, js, index, js, mutation – types. Js, mutations. Js specific folders classification, watch an the end of the article

From the name, you can know what these four are for. I suggest you read more vuex documents and practice with multiple poses and hands. Slowly, you will understand.

// src/store/index.js

/** * Created by Admin on 2017/11/21. */
import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations'; // This will be explained later
import actions from './actions'; // This will be explained later
Vue.use(Vuex);

const store = new Vuex.Store({
  mutations,
  actions,
  // Write initial data
  state: {
    totalIndex: 0.list: [{
      name: 'story'.avatar: 'https://i.imgur.com/LIvj3YT.jpg'.date: 'November 23, 2017 15:34'.introduce: "Look, this is my goddess."}}}]);export default store;

Copy the code

Unsurprisingly, you’ll find this under the home page

Vuex initial data ok, let’s start writing create and delete

Create the plan list component

Then we need to create our create, the create part is very simple, currently only by name and content, the time is to get the current time, the avatar is fixed.

/src/views/creatPlan/creatPlan.vue

<template>
    <div class="creatPlan" v-loading.fullscreen="loading" element-loading-text="Loading like hell.">
      <el-form ref="formData" :model="formData" label-width="80px">
        <el-row :span="24" :gutter="32">
          <el-col :span="12">
            <el-form-item
              label="Name">
              <el-input v-model="formData.name" placeholder="Name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="24" :gutter="32">
          <el-col :span="24">
            <el-form-item
              label="Content">
              <el-input v-model="formData.introduce" placeholder="Content"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="24" :gutter="32">
          <el-col :span="24">
            <el-button type="primary" round @click="save">save</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>
Copy the code

JS part

<script type="text/ecmascript-6">
    import { CurentTime } from '@/utils/formData'; // This is a tool to get the current time, which will be covered later
    export default {
      props: [],
      data () {
        return {
          loading: false.formData: {
            name: ' '.introduce: ' '}}; },computed: {},
      mounted () {},
      / / component
      components: {},
      methods: {
        save () {
          const plan = {
            avatar: 'https://i.imgur.com/LIvj3YT.jpg'.name: this.formData.name,
            introduce: this.formData.introduce,
            date: CurentTime() // Use the get current time tool
          };
          // Add a plan
          this.$store.dispatch('savePlan', plan);
          this.$router.go(- 1); }},// When dom is created
      created () {},
      watch: {}};</script>
Copy the code

This component is pretty simple just two inputs, and then a button, save and we’re pushing the data into our store list

Vuex part

In Vue2.0, the use of events for communication is abolished, so we can use Event Bus for small projects, and it is better to use Vuex for the rest. In this article, we use Vuex for data communication

This.$store. Dispatch (‘savePlan’, plan).

If you think about it, we need two global pieces of data, one for the number of all planned items, and one for an array of planned lists.

SRC /store/index.js doesn’t have much to say, it’s just passing in our state,mutations,actions to initialize our store. We might also want to create our getter if we need to but we won’t in this case.

Mutation -types. Js = mutation-types. Js = mutation-types

// src/store/mutation-types.js

// Add and delete a schedule
export const SAVE_PLAN = 'SAVE_PLAN';
export const DELETE_PLAN = 'DELETE_PLAN';
Copy the code

// src/store/mutation.js

import * as types from './mutation-types';
export default {
  // Add a new plan
  [types.SAVE_PLAN] (state, plan) {
    state.list.push(
      Object.assign({ }, plan)
    );
  },
  // Delete a plan
  [types.DELETE_PLAN] (state, idx) {
    state.list.splice(idx, 1); }};Copy the code

And then finally look at oursactionsIt makes sense

// src/store/actions.js

import * as types from './mutation-types';

export default{ savePlan ({ commit }, plan) { commit(types.SAVE_PLAN, plan); }, deletePlan ({ commit }, plan) { commit(types.DELETE_PLAN, plan); }};Copy the code

ouractionsIt’s all about raising events and passing in parameters

This.$store.dispatch(‘savePlan’, plan) calls savePlan in actions.js, SavePlan triggers the types.SAVE_PLAN on mutations and finally changes the data view

PS: One trick here is that in mutations, we connect them with uppercase underscores, but in actions, we use lowercase humps. Personally, I understand that this is a publish-subscribe model

Mutation -types records all of our event names

Mutations register our methods for all kinds of data changes

Actions can write asynchronous logic or some logic to commit our events

If we have a getter we can just put some of the data that we need to process and return in there and not do any business

Start experimenting with your own plan board!

::: HLJS-Center add me… ::