目录
5.在views新建vuex目录,添加Page1.vue和Page2.vue文件
一、介绍
1、什么是Vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 +
库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
2.vuex的各个js文件用途
vuex一共有四个js文件组成分别是actions.js、getters.js、mutations.js、state.js
其中
- State:单一状态树
- Getters:状态获取
- Mutations:触发同步事件
- Actions:提交mutation,可以包含异步操作
- Module:将vuex进行分模块
二、使用
1.安装
npm i -S vuex@3.6.2
2.创建store文件夹,创建文件
如图所示:
3.在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
4.在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/>'
})
5.在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>
6.配置路由
修改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
}
7.修改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>
三、存取值
- 修改src/store/state.js
export default { name: 'Vuex学习' }
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>
-
getters取值
1.修改src/store/getters.js中的值
export default {
getName(state){
return state.name;
}
}
2.修改Page1.vue的内容
#div中添加
<p>getters取值</p>
<button @click="func2">getters取值</button>
#methods中添加
func2(){
this.msg = this.$store.getters.getName;
}
2.存值
-
mutations存值
- 修改mutations.js的内容
export default { setName(state, payload) { state.name = payload.name; } }
- 修改Page1.vue
#div中添加 <p>mutations存值</p> <button @click="func3">mutations存值</button> #methdos中添加 func3(){ this.$store.commit('setName',{ name: '这是修改后的Vuex学习' }); }
- 修改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>
-
actions存值
- 修改Page1.vue的内容,删除data中的msg,改为computed属性
computed:{ msg(){ return this.$store.state.name; } }
- 修改store/actions.js
export default { setNameAsync(context, payload) { //context指的是vuex的实例 //等价于this.$store setTimeout(function () { context.commit('setName',payload); },6000) } }
- 修改Page1.vue
#div中添加 <p>actions存值</p> <button @click="func4">actions存值</button> #methods中添加 func4(){ this.$store.dispatch('setNameAsync',{ name: '这是修改后的Vuex学习--action' }); }
效果:异步修改值
3.发送ajax请求获取后台数据
- 修改api/action.js
'VUEX_INFO': '/vuex/queryVuex',//vuex异步获取数据
- 修改Page1.vue
#div中添加 <p>后台ajax改变值</p> <button @click="func5">后台ajax改变值</button> #methods中添加 func5(){ this.$store.dispatch('setNameAjax',{ _this: this }); }
- 修改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=>{ }) } }