vuex的使用【使用场景：无关联的组件之间传值】

1.store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    lists:[]
  },
  mutations: {
    addItem(state,value) {
      state.lists.push(value);
    }
  },
  actions: {

  },
});

2.add.vue

<template>
  <div>
    <p>标题</p>
    <input type="text" v-model="title">
    <p>内容</p>
    <input type="text" v-model="content">
    <div class="btn" @click="add()">添加</div>
  </div>
</template>

<script>
import store from "@/store";
export default {
  name: "Add",
  store,
  data() {
    return {
      title: "",
      content: ""
    };
  },
  methods: {
    add() {
      store.commit("addItem", {
        title: this.title,
        content: this.content
      })
      this.title = ""
      this.content = ""
      //路由跳转
      this.$router.push('/home/list')
    }
  }
};
</script>

<style scoped>
</style>

3.list.vue

<template>
  <div>
    <ul>
      <li v-for="(item,index) in pagelists" :key="index">
          {{item.title}}——{{item.content}}
      </li>
    </ul>
  </div>
</template>

<script>
import store from "@/store";
export default {
  name: "List",
  store,
  computed: {
    //动态列表
    pagelists() {
      return store.state.lists;
    }
  },
};
</script>

<style scoped>
</style>