1,什么是Vuex
官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”(数据仓库), 让其在各个页面上实现数据的共享包括状态,并且可操作
Vuex分成五个部分:
1.State:单一状态树
2.Getters:状态获取
3.Mutations:触发同步事件
4.Actions:提交mutation,可以包含异步操作
5.Module:将vuex进行分模块
1.2vueX安装
npm install vuex -S
npm i -S vuex@3.6.2
1.3,创建store模块,分别创建state/actions/mutations/getters.js
1.4.在src/store/index.js中写入内容
新建vuex的store实例,并注册上面引入的各大模块
import Vue from "vue";
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
export default store
1.5.在src/main.js中导入并使用store实例
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from '@/api/http'
import VueAxios from 'vue-axios'
import router from './router'
import store from './store'
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')
Vue.use(ElementUI);
Vue.use(VueAxios,axios)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
data(){
return{
Bus: new Vue({})
}
},
router,
store,
components: { App },
template: '<App/>'
})
1.6在views新建vuex目录,添加Page1.vue和Page2.vue文件
Page1.vue
<template>
<div>
<h1>这是页面1</h1>
</div>
</template>
<script>
export default {
name: "Page1"
}
</script>
<style scoped>
</style>
Page2.vue
<template>
<div>
<h1>这是页面2</h1>
</div>
</template>
<script>
export default {
name: "Page1"
}
</script>
<style scoped>
</style>
1.7.配置路由
修改src/router/index.js
import Page1 from '@/views/vuex/Page1'
import Page2 from '@/views/vuex/Page2'
#添加到与TopNav同级的地方
{
path: '/vuex/Page1',
name: 'Page1',
component: Page1
},{
path: '/vuex/Page2',
name: 'Page2',
component: Page2
}
1.8.修改components/LeftNav.vue
=====仅展示部分内容
<el-menu
router :default-active="$route.path"
default-active="2" class="el-menu-vertical-demo" background-color="#334157"
text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png" alt="">
</div>
///======添加的内容
<el-menu-item
index="/vuex/Page1"
key="'key_999">
<span>Vuex页面1</span>
</el-menu-item>
<el-menu-item
index="/vuex/Page2"
key="'key_1000">
<span>Vuex页面2</span>
</el-menu-item>
1.9效果
2.实例
修改src/store/state.js
export default {
name: 'Vuex学习'
}
3.取值
3.1.state直接取值
修改src/views/vuex/Page1.vue
<template>
<div>
<h1>这是页面1========{{msg}}</h1>
<p>state直接取值</p>
<button @click="func1">state直接取值</button>
</div>
</template>
<script>
export default {
name: "Page1",
data(){
return{
msg: null
}
},
methods:{
func1(){
this.msg = this.$store.state.name;
}
}
}
</script>
<style scoped>
</style>
3.2效果
4.getters取值
4.1.修改src/store/getters.js
export default {
getName(state){
return state.name;
}
}
4.2.修改Page1.vue
#div中添加
<p>getters取值</p>
<button @click="func2">getters取值</button>
#methods中添加
func2(){
this.msg = this.$store.getters.getName;
}
4.3效果
5.mutations存值
5.1.修改mutations.js
export default {
setName(state, payload) {
state.name = payload.name;
}
}
5.2修改page1.vue
#div中添加
<p>mutations存值</p>
<button @click="func3">mutations存值</button>
#methdos中添加
func3(){
this.$store.commit('setName',{
name: '这是修改后的Vuex学习'
});
}
5.3修改page2.vue
<template>
<div>
<h1>这是页面2===={{msg}}</h1>
</div>
</template>
<script>
export default {
name: "Page2",
data(){
return{
msg: null
}
},created() {
this.msg = this.$store.state.name;
}
}
</script>
<style scoped>
</style>
5.4效果
6.actions存值
6.1.修改Page1.vue,删除data中的msg,在data后面加computed属性
computed:{
msg(){
return this.$store.state.name;
}
}
6.2.修改store/actions.js
export default {
setNameAsync(context, payload) {
//context指的是vuex的实例
//等价于this.$store
setTimeout(function () {
context.commit('setName',payload);
},6000)
}
}
6.3.修改Page1.vue
#div中添加
<p>actions存值</p>
<button @click="func4">actions存值</button>
#methods中添加
func4(){
this.$store.dispatch('setNameAsync',{
name: '这是修改后的Vuex学习--action'
});
}
6.4效果
7.发送ajax请求获取后台数据
7.1.修改api/action.js
'VUEX_INFO': '/vuex/queryVuex',//vuex异步获取数据
7.2.修改Page1.vue
#div中添加
<p>后台ajax改变值</p>
<button @click="func5">后台ajax改变值</button>
#methods中添加
func5(){
this.$store.dispatch('setNameAjax',{
_this: this
});
}
7.3.修改actions.js
export default {
setNameAsync(context, payload) {
//context指的是vuex的实例
//等价于this.$store
setTimeout(function () {
context.commit('setName', payload);
}, 3000)
},
setNameAjax(context, payload) {
let _this = payload._this;
let url = _this.axios.urls.VUEX_INFO;
let params = {
resturantName: '这是ajax的修改'
}
_this.axios.get(url, {params}).then(resp=>{
if(resp.data.success){
context.commit('setName',{
name: resp.data.msg
})
}
}).catch(err=>{
})
}
}
7.4效果