1,vuex
官网介绍:Vuex 是一个专为 Vue.js 应用程序开发的状态(数据)管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 个人理解:是一个‘’仓库‘’,只是vuex里面存储的是数据。
2,vuex的各个模块
- state:用于数据的存储,
- getters:如vue的计算属性一样,可以对state的数据进行二次封装,
- mutations:同步操作,改变state数据的唯一途径,
- actions:异步操作,类似于mutation,用于提交mutation来改变状态,
- modules:将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。
3,Vuex实例应用
首先在项目中下载vuex,执行命令:npm install --save vuex 。 在src目录下创建store文件夹
store目录结构
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
在main.js中导入store。
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});
数据初始化(./modules/login.js)
const state = {
account: '管理员',
password: '123456',
msg:'',
}
const mutations = {
SET_ACCOUNT: (state, account) => {
state.account = account
},
SET_PASSWORD: (state, password) => {
state.password = password
},
SET_MSG: (state, msg) => {
state.msg = msg
},
}
const actions = {
alterMsg({ commit }, v) {
commit('SET_MSG', v)
},
}
export default {
namespaced: true,
state,
mutations,
actions
}
存、取值
<template>
<div>
<h1>欢迎来到页面——vuex</h1>
<p>当前页面msg的值:{{msg}}</p>
<div>
<span>点击按钮,把msg存入vuex,并在下个页面显示</span>
<el-button type="primary" @click="handleSaveMsg">保存msg</el-button>
</div>
<hr>
<p>第1种方法,显示vuex中存在的账户号:{{oneAccount}}</p>
<p>第2种方法,显示vuex中存在的账户号:{{twoAccout}}</p>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: "vueVuex",
data() {
return {
msg: "Hello Vue!",
};
},
computed: {
...mapState({
twoAccout: state => state.login.account,
}),
oneAccount() {
return this.$store.state.login.account;
}
},
methods: {
handleSaveMsg() {
this.$store.dispatch("login/alterMsg",this.msg);
this.$router.push({
name: "/vue/vuex-details"
});
},
},
};
</script>
效果展示
|