# vuex
的核心概念
核心 | 概念 |
---|---|
State | 访问状态对象 |
Getter | 计算过滤操作 |
Mutation | 修改状态 |
Action | 异步修改状态 |
Module | 模块组 |
# npm 安装
npm install vuex --save
# 在 src
文件夹下新建 vuex
文件夹,再在 vuex
文件夹下新建 store.js
文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: { // 全局变量在这里定义并且初始化,获取方法 this.$store.state.name
name: 'hello',
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: { // 全局方法在这里编写 方法名: state => { 方法体 },获取方法 this.$store.getters.getData
getData: state => {
return state.todos.filter(todo => todo.done);
}
},
mutations: { // 这里同步操作全局变量,获取方法 this.$store.commit('setName', {newName: 'hello'})
setName(state, payload) {
state.name = payload.newName;
}
},
actions: { // 这里可以异步操作全局变量,获取方法 this.$store.dispatch('setName', {newName: 'hello'})
setName({commit}, payload) {
commit('setName', payload);
}
}
});
# 引入 store.js
在 main.js 中写入以下内容:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
# 页面中使用
<template>
<div id="app">
{{$store.state.name}}
{{$store.getters.getData}}
<button @click="$store.commit('setName', {newName: 'hello'})">更改name为hello</button>
<button @click="$store.state.name = '123'">更改name为123</button>
<button @click="$store.dispatch('setName', {newName: '456'})">更改name为456</button>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
参考博客: