1，vue-cli创建项目
(1) npm install -g vue-cli
如果安装失败，可以使用npm cache clean 清理缓存，然后再重新安装。
(2) vue -V 查看是否安装成功
(3) 初始化项目vue init webpack vue-project
image.png
(4) 安装vuex
npm install vuex --save(5) 在src目录下新建文件夹store
image.png
(6) 路由配置 router---index.js
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' // 导入响应的模块，*相当于引入了这个组件下所有导出的事例
import * as actions from './actions'
import * as mutations from './mutations'
Vue.use(Vuex)
// 首先声明一个需要全局维护的状态state
const state = {
newName: '新名字',
id: '123'
}
// 注册上边引入的各大模块
const store = new Vuex.Store({
state, // 共同维护的一个状态，state里面可以是很多个全局状态
getters, // 获取数据并渲染
actions, // 数据的异步操作
mutations// 处理数据的唯一途径，state的改变和赋值都在这里
})
export default store
// 导出store，并在main.js中引用注册
actions.js
// 给action注册事件处理函数，当这个函数被触发时候，将状态提交到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组件点击更改名称为A
state.newName = name // 把方法传递过来的参数，赋值给state中的newName
}
export const modifyBName = (state, name) => {
state.newName = name
}
getters.js
// 获取最终的状态信息
export const newName = state => state.newName
在main.js中导入store实例
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>
<!-- 点击修改 为 A -->
<button class="btn" @click="modifyAName('AAA')">修改为AAAA</button>
</div>
<div class="marTop">
<button class="btn" @click="trunToB">跳转到B页面</button>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
name: 'HomeA',
data () {
return {
}
},
methods: {
...mapActions( // 语法糖
['modifyAName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
),
trunToB () {
this.$router.push({path: '/home/HomeB'}) // 路由跳转到B
}
},
computed: {
...mapGetters(['newName']) // 动态计算属性，相当于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>
<!-- 点击修改 为 B -->
<button class="btn" @click="modifyBName('BBB')">修改为BBBB</button>
</div>
<div class="marTop">
<button class="btn" @click="trunToA">跳转到A页面</button>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
name: 'HomeB',
data () {
return {
}
},
methods: {
...mapActions( // 语法糖
['modifyBName'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
),
trunToA () {
this.$router.push({path: '/home/HomeA'}) // 路由跳转到A
}
},
computed: {
...mapGetters(['newName']) // 动态计算属性，相当于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
网友评论