1. 下载vuex,但是在脚手架中可以直接使用.
安装代码: npm i vuex@3.4.0 --save
2. 新建js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.store({})
export default store
3.main.js
引入 import store from ' '
new Vue({ store })
语法: state:{},
getters:{
计算属性名字(state){}
}
取值:this.$store.getters
语法:
state:{},
mutations:{
方法名字:(state,参数){
//参数多的话使用对象包裹
}
}
调用:this.$store.commit('方法',参数)
语法:
state{},
actions:{
方法(store,参数){
store.commit()
}
}
调用:this.$store.dispatch()
模块拆分其实是拆分的存储,也就是存储的位置(state)拆分出去了;其他的(getters\mutations\actions)都没有拆分,因此容易造成命名冲突,需要我们在模块化内开启命名空间:
modules:{
模块名:{
namespaced:true,
state:{},
getters:{}
}
}
开启完命名空间后对 (getters\mutations\actions)造成的影响 名字前面
加上了 "模块名/"
使用: $store.getters['模块名/方法名']