Vuex 的使用 State Mutation 实现多个页面共享计数
项目目录
main.js
import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/css/basic.scss'; import router from './router/router.js'; //4、挂载路由 new Vue({ el: '#app', router, render: h => h(App) })
app.vue
<template> <div id="app"> <header class="header"> <router-link to="/home">首页</router-link> <router-link to="/news">新闻</router-link> <router-link to="/user">用户</router-link> </header> <hr> <router-view></router-view> </div> </template> <script> export default { data () { return { msg:'你好vue' } } } </script> <style lang="scss"> .header{ height:4.4rem; background:#000; color:#fff; line-height:4.4rem; text-align:center; a{ color:#fff; padding:0 2rem } } </style>
store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ count:1 } /*2.mutations里面放的是方法,方法主要用于改变state里面的数据 */ var mutations={ incCount(){ ++state.count; } } //vuex 实例化 Vuex.store const store = new Vuex.Store({ state, mutations }) export default store;
router.js
import Vue from 'vue'; //配置路由 import VueRouter from 'vue-router'; Vue.use(VueRouter); //1.创建组件 import Home from '../components/Home.vue'; import News from '../components/News.vue'; import User from '../components/User.vue'; //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', component: News, name: 'news' }, { path: '/user', component: User }, { path: '*', redirect: '/home' } /*默认跳转路由*/ ] //3.实例化VueRouter 注意:名字 const router = new VueRouter({ mode: 'history', /*hash模式改为history*/ routes // (缩写)相当于 routes: routes }) //5 <router-view></router-view> 放在 App.vue export default router;
home.vue
<template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 我是首页组件 -- {{this.$store.state.count}} <br> <button @click="incCount()">增加数量+</button> </div> </template> <script> //1. 引入store 建议store的名字不要变 import store from '../vuex/store.js'; //2.注册 export default{ data(){ return { msg:'我是一个home组件', value1: null, } }, store, methods:{ incCount(){ //改变vuex store里面的数据 this.$store.commit('incCount'); /*触发 mutations 改变 state里面的数据*/ } } } </script> <style lang="scss" scoped> </style>
News.vue
<template> <div id="news"> 我是新闻组件 --{{this.$store.state.count}} <br> <button @click="incCount()">增加数量</button> </div> </template> <script> //1. 引入store import store from '../vuex/store.js'; export default{ data(){ return { msg:'我是一个新闻组件' } }, store, methods:{ incCount(){ this.$store.commit('incCount'); } } } </script> <style lang="scss" scoped> .list{ li{ height:3.4rem; line-height:3.4rem; boder-bottom:1px solid #eee; font-size:1.6rem; a{ color:#666; } } } </style>