vue爬坑记:初学vuex(一)

• 安装vuex

npm install vuex --save

src目录下新建vuex文件夹,新建store.js

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


Vue.use(Vuex)


const state = {
    count: 5
}

const mutations = {
    add(state) {
        state.count++
    },
    reduce(state) {
        state.count--
    }
}
export default new Vuex.Store({
    state,mutations
})

• components文件夹下新建count.vue文件

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr />
        <h3>{{$store.state.count}}</h3> 
        <h3>{{count}}</h3> 
        <div>
            <button @click="$store.commit('add')">+</button>    
            <button @click="$store.commit('reduce')">-</button>    
        </div> 
    </div>
</template>
<script>
import store from "@/vuex/store";
import { mapState } from "vuex";
export default {
  data() {
    return {
      msg: "hello Vuex"
    };
  },
  computed: mapState(["count"]),
  //   computed:{
  //       count(){
  //           return this.$store.state.count;
  //       }
  //   },
  store
};
</script>

• router文件夹下修改index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Count from '@/components/count'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/count',
      name: 'Count',
      component: Count
    }
  ]
})

浏览器的地址栏后面输入count就可以直接访问