标签：默认 patch apm get 导入 vue 组件 pst 导出
注解：vuex是一个很简单、很方便的技术，入门很简单，这里给大家详细介绍下vuex的进阶使用。
一、vuex模块化modules
1、项目根目录新建一个sotre文件夹，在store文件夹内，新建两个文件（一个文件，一个文件夹），一个index.js文件，一个modules文件夹。
目录结构：
store
index.js --文件
modules --文件夹
2、store->index.js
import Vue from ‘vue‘
import Vuex from ‘vuex‘
import modules from ‘./modules‘
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules:modules. //注意哦，后一个modules文件夹中有index.js文件，所以可以直接写文件夹名，前端中文件夹中有index.js 可以只写文件夹名(默认引入文件夹中的index.js)
})
3、store->modules
目录结构
store
index.js
modules
index.js //将所有模块引入一个js文件，统一导出，store->index.js中就只需要引入modules,类似modules->index.js
cart.js //购物车模块
login.js //登陆模块
4、具体模块写法，cart.js
//cart.js
const state={
cart:"one-sotre"
}
const actions={
cart({commit},data){
commit("cart",data)
}
};
const mutations={
cart(state,data){
state.cart=data;
}
}
export default {
state,
actions,
mutations
}
5、将store->modules->[cart.js,login.js]导入store->modules->index.js中，统一处理导出
//store->modules->index.js
import login from ‘./login‘;
import cart from ‘./cart‘;
export default{
login, //键值相同时,login:login==login
cart
}
6、在store->index.js中使用导出[login,cart]模块
import Vue from ‘vue‘
import Vuex from ‘vuex‘
import modules from ‘./modules‘. //简写，引入modules/index.js
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules:modules
})
在main.js中引入即可。
7、vue components组件中使用
//使用vuex中的函数mapState、mapAction,需要注意mapState、mapGetter这两个需要数据实时更新的书写在computed计算属性中，mapAction等方法写在methods方法中。
//.vue,这里只讲两个方法，mapState和mapAction，mapState和[mapGetters,mapMutions,mapActions]写法可以简单分为两种，所以介绍两种写法.
<script>
import {
mapState,
mapActions
} from ‘vuex‘
export default{
mounted(){
this.login("true"); //调用mapActions[‘login‘];
console.log(this.login) //调用..mapState({login:state=>state.login.login})
},
methods:{
...mapActions[‘login‘]. //这里引入的是store->modules->login.js中的vuex Actions方法，...mapActions[‘login‘]==this.$store.dispatch("login"),mapMutions,mapActions写在methods中.
},
computed{
...mapState({login:state=>state.login.login}) //这里引入的是store->modules->login.js中的state数据,...mapState({login:state=>state.login.login})==this.state.login.login;mapState,mapGetters写在computed中，跟computed自身属性有关.
}
}
</script>
//这个文档聚集了modules 模块化写法,vuex基础用法，mapState、mapGetters辅助函数的使用。
Vuex进阶使用之modules模块化划分、mapState、mapActions辅助函数的使用
标签：默认 patch apm get 导入 vue 组件 pst 导出
原文地址：https://www.cnblogs.com/uimeigui/p/11967364.html
