Udemy - Nuxt JS with Laravel API - Building SSR Vue JS Apps 笔记6 Nuxt - Vuex

Vuex Store

Loading Image From Assets Folder

下载一张图片到

static文件夹内：

修改assets/styles/main.css:

body {
  background-color: azure;
}

div.jumbotron {
  border-radius: 0;
  background-image: url("/cbimage.jpg");
  height: 300px;
  background-size: cover;
}

打开： http://localhost:3000/ 效果：

Create Vuex Store

创建 store/index.js文件：

//create a store
export const state = () => ({
  posts: [],
});

//getters
export const getters = {
  posts(state) {
    return state.posts;
  },
}


//mutations
export const mutations = {
  SET_POSTS(state, posts) {
    state.posts = posts;
  },
}

//actions
export const actions = {
  setPosts({commit}, posts) {
    commit("SET_POSTS", posts);
  }
}

打开 http://localhost:3000/ ，用vue chrome extension可以看到：

Populate Vuex Store & Accessing Data from Vuex Store

修改pages/posts/index.vue文件：

<template>
  <div>
    <h2>Making API request - the Vue way</h2>
    <div class="container row">
      <Card class="ml-auto mr-auto" v-for="post in allPosts" :key="post.id" :post="post"></Card>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import Card from "../../components/Card";

  export default {
    name: "index.vue",
    components: {
      Card,
    },
    data() {
      return {
        posts: [],
      }
    },
    computed: {
      allPosts() {
        return this.$store.getters.posts;
      }
    },
    // mounted() {
    //   axios.get('https://jsonplaceholder.typicode.com/todos')
    //     .then(response => {
    //       console.log(response);
    //       this.posts = response.data;
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     })
    // },
    // async asyncData(context) {
    //   let {data} = await axios.get('https://jsonplaceholder.typicode.com/posts');
    //   return {posts: data};
    // },

    async asyncData({store}) {
      let {data} = await axios.get('https://jsonplaceholder.typicode.com/posts');
      store.dispatch('setPosts', data);
    },
    head: {
      title: 'List of posts',
    }
  }
</script>

<style scoped>

</style>

或者使用mapGetters：

<template>
  <div>
    <h2>Making API request - the Vue way</h2>
    <div class="container row">
      <Card class="ml-auto mr-auto" v-for="post in posts" :key="post.id" :post="post"></Card>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import Card from "../../components/Card";

  import {mapGetters} from 'vuex';

  export default {
    name: "index.vue",
    components: {
      Card,
    },
    // data() {
    //   return {
    //     posts: [],
    //   }
    // },
    computed: {
      ...mapGetters(['posts']),
      // allPosts() {
      //   return this.$store.getters.posts;
      // }
    },
    // mounted() {
    //   axios.get('https://jsonplaceholder.typicode.com/todos')
    //     .then(response => {
    //       console.log(response);
    //       this.posts = response.data;
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     })
    // },
    // async asyncData(context) {
    //   let {data} = await axios.get('https://jsonplaceholder.typicode.com/posts');
    //   return {posts: data};
    // },

    async asyncData({store}) {
      let {data} = await axios.get('https://jsonplaceholder.typicode.com/posts');
      store.dispatch('setPosts', data);
    },
    head: {
      title: 'List of posts',
    }
  }
</script>

<style scoped>

</style>

Using nuxt Fetch Method

asyncData与fetch的区别看官方文档。

修改pages/posts/index.vue文件：

<template>
  <div>
    <h2>Making API request - the Vue way</h2>
    <div class="container row">
      <Card class="ml-auto mr-auto" v-for="post in posts" :key="post.id" :post="post"></Card>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import Card from "../../components/Card";

  import {mapGetters} from 'vuex';

  export default {
    name: "index.vue",
    components: {
      Card,
    },
    // data() {
    //   return {
    //     posts: [],
    //   }
    // },
    computed: {
      ...mapGetters(['posts']),
      // allPosts() {
      //   return this.$store.getters.posts;
      // }
    },
    // mounted() {
    //   axios.get('https://jsonplaceholder.typicode.com/todos')
    //     .then(response => {
    //       console.log(response);
    //       this.posts = response.data;
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     })
    // },
    // async asyncData(context) {
    //   let {data} = await axios.get('https://jsonplaceholder.typicode.com/posts');
    //   return {posts: data};
    // },

    // async asyncData({store}) {
    //   let {data} = await axios.get('https://jsonplaceholder.typicode.com/posts');
    //   store.dispatch('setPosts', data);
    // },
    async fetch({store}) {
      let {data} = await axios.get('https://jsonplaceholder.typicode.com/posts');
      store.dispatch('setPosts', data);
    },
    head: {
      title: 'List of posts',
    }
  }
</script>

<style scoped>

</style>

源代码：

https://github.com/dzkjz/nuxt-learning-lesson

branch选择nuxt-vuex