1滚秩，vue-cli創(chuàng)建項(xiàng)目
(1) npm install -g vue-cli
如果安裝失敗，可以使用npm cache clean 清理緩存淮捆，然后再重新安裝郁油。
(2) vue -V 查看是否安裝成功
(3) 初始化項(xiàng)目vue init webpack vue-project

image.png

image.png

import Vue from 'vue'
import Router from 'vue-router'
import HomeA from '@/components/home/HomeA'
import HomeB from '@/components/home/HomeB'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HomeA',
      component: HomeA
    },
    {
      path: '/home/HomeA',
      name: 'HomeA',
      component: HomeA
    },
    {
      path: '/home/HomeB',
      name: 'HomeB',
      component: HomeB
    }
  ]
})

(7)
store.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 導(dǎo)入響應(yīng)的模塊，*相當(dāng)于引入了這個(gè)組件下所有導(dǎo)出的事例
import * as actions from './actions'
import * as mutations from './mutations'

Vue.use(Vuex)

// 首先聲明一個(gè)需要全局維護(hù)的狀態(tài)state
const state = {
  newName: '新名字',
  id: '123'
}

// 注冊(cè)上邊引入的各大模塊
const store = new Vuex.Store({
  state, // 共同維護(hù)的一個(gè)狀態(tài)攀痊，state里面可以是很多個(gè)全局狀態(tài)
  getters, // 獲取數(shù)據(jù)并渲染
  actions, // 數(shù)據(jù)的異步操作
  mutations// 處理數(shù)據(jù)的唯一途徑桐腌，state的改變和賦值都在這里
})

export default store
// 導(dǎo)出store，并在main.js中引用注冊(cè)

actions.js

// 給action注冊(cè)事件處理函數(shù)苟径，當(dāng)這個(gè)函數(shù)被觸發(fā)時(shí)候案站，將狀態(tài)提交到mutations中處理
export function modifyAName ({commit}, name) {
  return commit('modifyAName', name)
}

// export function modifyBName ({commit}, name) {
//   return commit('modifyBName', name)
// }

export const modifyBName = ({commit}, name) => commit('modifyBName', name)

mutations.js

export const modifyAName = (state, name) => { // A組件點(diǎn)擊更改名稱為A
  state.newName = name // 把方法傳遞過來的參數(shù)，賦值給state中的newName
}

export const modifyBName = (state, name) => {
  state.newName = name
}

getters.js

// 獲取最終的狀態(tài)信息
export const newName = state => state.newName

在main.js中導(dǎo)入store實(shí)例

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, // 全局使用vuex
  components: { App },
  template: '<App/>'
})

(8)組件A

<template>
  <div class="componentsA">
    <P class="title">組件A</P>
    <P class="titleName">名稱：{{newName}}</P>
    <div>
      <!-- 點(diǎn)擊修改 為 A  -->
      <button class="btn" @click="modifyAName('AAA')">修改為AAAA</button>
    </div>
    <div class="marTop">
      <button class="btn" @click="trunToB">跳轉(zhuǎn)到B頁面</button>
    </div>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
export default {
  name: 'HomeA',
  data () {
    return {
    }
  },
  methods: {
    ...mapActions( // 語法糖
      ['modifyAName'] // 相當(dāng)于this.$store.dispatch('modifyName'),提交這個(gè)方法
    ),
    trunToB () {
      this.$router.push({path: '/home/HomeB'}) // 路由跳轉(zhuǎn)到B
    }
  },
  computed: {
    ...mapGetters(['newName']) // 動(dòng)態(tài)計(jì)算屬性棘街，相當(dāng)于this.$store.getters.resturantName
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title,.titleName{
    color: blue;
    font-size: 20px;
  }
  .btn{
    width: 160px;
    height: 40px;
    background-color: blue;
    border: none;
    outline: none;
    color: #ffffff;
    border-radius: 4px;
  }
  .marTop{
    margin-top: 20px;
  }
</style>

(9) 組件B

<template>
  <div class="componentsB">
    <P class="title">組件B</P>
    <P class="titleName">名稱：{{newName}}</P>
    <div>
      <!-- 點(diǎn)擊修改 為 B  -->
      <button class="btn" @click="modifyBName('BBB')">修改為BBBB</button>
    </div>
    <div class="marTop">
      <button class="btn" @click="trunToA">跳轉(zhuǎn)到A頁面</button>
    </div>
  </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
export default {
  name: 'HomeB',
  data () {
    return {
    }
  },
  methods: {
    ...mapActions( // 語法糖
      ['modifyBName'] // 相當(dāng)于this.$store.dispatch('modifyName'),提交這個(gè)方法
    ),
    trunToA () {
      this.$router.push({path: '/home/HomeA'}) // 路由跳轉(zhuǎn)到A
    }
  },
  computed: {
    ...mapGetters(['newName']) // 動(dòng)態(tài)計(jì)算屬性蟆盐，相當(dāng)于this.$store.getters.resturantName
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title,.titleName{
    color: red;
    font-size: 20px;
  }
  .btn{
    width: 160px;
    height: 40px;
    background-color: red;
    border: none;
    outline: none;
    color: #ffffff;
    border-radius: 4px;
  }
  .marTop{
    margin-top: 20px;
  }
</style>

image.png

image.png

image.png

image.png

參考出處