collect

vue-book/vue-webpack/build/webpack.base.conf.js

@@ -9,7 +9,7 @@ function resolve (dir) {
 
 module.exports = {
   entry: {
-    app: './src-vuex/main.js'
+    app: './src-book/main.js'
   },
   output: {
     path: config.build.assetsRoot,

vue-book/vue-webpack/src-book/App.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="app">
     <transition name="translate">
-      <router-view class="pos"></router-view>
+      <!--增加缓存 -->
+        <router-view class="pos"></router-view>
     </transition>
     <tab></tab>
   </div>

vue-book/vue-webpack/src-book/containers/Collect.vue

@@ -1,15 +1,22 @@
 <template>
-    <div>
-      collect
+    <div class="page">
+      <MHeader title="收藏列表"></MHeader>
+      <div class="content-scroll">
+        {{collect}}
+      </div>
     </div>
 </template>
 <script>
+    import {mapState} from 'vuex';
+    import MHeader from '../components/MHeader.vue'
     export default {
         data(){
             return {}
         },
-        computed: {},
-        components: {},
+        computed: {
+          ...mapState(['collect'])
+        },
+        components: {MHeader},
         methods: {}
     }
 </script>

vue-book/vue-webpack/src-book/containers/List.vue

@@ -13,6 +13,7 @@
           <div>
             <h3>{{book.bookName}}</h3>
             <p>{{book.bookInfo}}</p>
+            <span><i class="iconfont icon-shoucang"></i>收藏</span>
           </div>
         </li>
       </ul>

vue-book/vue-webpack/src-book/main.js

@@ -20,11 +20,12 @@ Vue.use(VueLazyLoad, {
   loading: loading,//加载是显示的loding图，提供了一个全局 指令 v-lazy 将真实的路径放到v-lazy上即可
 });
 
-
+import store from './vuex'
 new Vue({
   el: '#app',
   router,
-   ...App
+   ...App,
+  store
   /*template:'<App/>',
   components:{App}*/
 });

vue-book/vue-webpack/src-book/vuex/index.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+Vue.use(Vuex);
+
+import {state} from './state'
+export default new Vuex.Store({
+  state
+});

vue-book/vue-webpack/src-book/vuex/state.js

@@ -0,0 +1,5 @@
+//定义收藏列表
+export const state = {
+  collect:[]
+};
+

vue-book/vue-webpack/src-vuex/components/Blue.vue

@@ -1,16 +1,27 @@
 <template>
     <div>
-      蓝色 {{$store.state.color}}
+      蓝色 {{c}}
+      <button @click="changeColor">变蓝</button>
     </div>
 </template>
 <script>
+    import {mapState} from 'vuex';
     export default {
         data(){
             return {}
         },
-        computed: {},
+        computed: {
+          ...mapState({c:'color',a:'a'}),
+          //...mapState(['color'])
+        },
         components: {},
-        methods: {}
+        methods: {
+            //不允许组件直接更改状态
+          changeColor(){
+              this.$store.commit('change','blue')
+              //this.$store.state.color = 'blue';
+          }
+        }
     }
 </script>
 <style scoped>

vue-book/vue-webpack/src-vuex/components/Red.vue

@@ -1,16 +1,32 @@
 <template>
     <div>
-      红色 {{$store.state.color}}
+      红色 {{color}} {{a}} {{msg}}
+      <button @click="changeColor">变红</button>
+      {{computeColor}}
     </div>
 </template>
 <script>
+  //辅助函数 简化写法
+    import {mapState,mapMutations,mapGetters} from 'vuex';
     export default {
         data(){
             return {}
         },
-        computed: {},
+      //计算属性 this.$store,虽然是属性 但是写法是函数
+        computed:{
+          msg(){
+            return '我很帅'
+          },
+          ...mapState(['color','a']),
+          ...mapGetters(['computeColor'])
+        },
         components: {},
-        methods: {}
+        methods: {
+          ...mapMutations(['change']),
+          changeColor(){
+              this.change('red');
+          }
+        }
     }
 </script>
 <style scoped>

vue-book/vue-webpack/src-vuex/main.js

@@ -4,12 +4,28 @@ import App from './App.vue';
 //使用vuex插件，帮我们解决跨组件传递数据
 import Vuex from 'vuex';
 Vue.use(Vuex);
+//每一个规则都是一个函数，函数第一个参数就是状态
+const mutations = {
+  change(state,n){
+    state.color = n;
+  },
+};
 const state = { //状态，将所有的状态统一放到state中
-  color:'red'
+  color:'red',
+  a:'1'
+};
+//计算状态的
+const getters = {
+  computeColor(state){ //根据状态计算新属性
+    return state.color+'black';
+  }
 };
 let store = new Vuex.Store({
-  state
+  state,
+  mutations, //管理状态
+  getters
 });
+
 new Vue({
   ...App,
   store, //会在实例上生成一个属性 this.$store