标签：map 目的 共存 webpack app pst style pac 流程
首先，你必须明显明白vuex到底是干啥的，主要解决开发中的哪些问题？
Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式变化
说白了，就是：提供了那么一个公共存储的地方，存放各个组件的数据，组件访问数据和操作数据访问这个地方即可
所以，Vuex主要解决是组件间数据传递问题，尤其是嵌套组件，项目一大时，父子组件间的数据传递就非常麻烦了，而Vuex则提供了一种集中管理组件数据的方案，当然小型项目就没必要用Vuex了
Vuex的核心是Store(仓库)，相当于是一个容器，一个store实例中包含以下属性的方法：
注：不能直接修改数据，必须显式提交变化，目的是为了追踪到状态的变化
创建store.js文件，在main.js中导入并配置store.选项
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex);
//定义属性(数据)
var state = {
count: 6
}
//创建store对象
const store = new Vuex.Store({
state,
})
//导出store对象
export default store;
import Vue from ‘vue‘
import App from ‘./App.vue‘
import store from ‘./store.js‘ //导入store对象
new Vue({
store,
el: ‘#app‘,
render: h => h(App)
})
方式一：通过this.$store访问
//方式1：通过this.$store访问
computed: {
count() {
return this.$store.state.count;
}
}
方式二：通过mapState、mapGetters、mapActions访问，vuex提供了两个方法
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex);
//定义属性(数据)
var state = {
count: 6
}
//定义getters
var getters = {
count(state) {
return state.count;
}
}
//定义actions,要执行的操作，如流程判断、异步请求
const actions = {
increment(context) { //包含 commit dispatch state
context.commit(‘increment‘);
},
decrement(context) {
if (context.state.count > 10) {
context.commit(‘decrement‘);
}
}
}
//定义mutations,处理状态（数据）的改变
const mutations = {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
}
}
//创建store对象
const store = new Vuex.Store({
state,
getters,
actions,
mutations,
})
//导出store对象
export default store;
<template>
<div id="app">
<button @click="increment">增加</button>
<button @click="decrement">减小</button>
<p>当前数字为：{{count}}</p>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
name: "app",
data() {
return {
msg: "Welcome to Your Vue.js App"
};
},
//方式1：通过this.$store访问
/*computed: {
count() {
return this.$store.state.count;
}
}*/
/*computed:mapState([
‘count‘
])*/
computed: mapGetters(["count"]),
methods:mapActions([
‘increment‘,
‘decrement‘,
])
};
</script>
<style>
</style>
标签：map 目的 共存 webpack app pst style pac 流程
原文地址：https://www.cnblogs.com/xinsiwei18/p/9365606.html
