安装&搭建
npm i vuex@3
一般用vue2我喜欢安装vuex@3
yarn add vuex@3
再配置vuex:在src文件夹下创建store文件夹,在store里新建index.js文件(这个文件类似目录一样)
// 1. 引入vue和vuex
import Vue from "vue";
import Vuex from "vuex"
// 2. 安装插件
Vue.use(Vuex)
// 3. 创建Store实例对象
const store = new Vuex.Store({
modules: {
}
})
// 4. 导出store对象
export default store
再在store文件夹下创建你需要的模块js文件
// 定义子模块
export default {
namespaced: true,
state: () => ({
}),
mutations: {
},
actions: {
},
getters:{
}
}
Store
-
直接使用:
this.$store.state.模块名.xxx; -
map辅助函数
computed: {
...mapState('模块名', ['xxx']),
...mapState('模块名', {'新名字': 'xxx'})
}
Mutation 突变
这个对象专门修改state中的数据. tips:当然我们也可以直接在组件里面修改Vuex的数据,但是我没们不推荐这么做.这将会导致修改来源不明确的问题,不利于调试和后期维护.想要修改state中的数据只能通mutation而通过mutation修改state里面的数据就能确保唯一性
-
直接使用:
this.$store.commit('模块名/mutation名', 参数) -
map辅助函数
methods: {
...mapMutations('模块名', ['xxx']),
...mapMutations('模块名',{'新名字': 'xxx'})
}
Action 活动
这里面执行异步操作.为了保证store中状态的每一次变化都是可追踪的,Vuex规定:Mutation必须是同步函数.否则,vue-devtools将无法正常追踪Store中的数据变化,这对大型项目的开发调试是灾难性的!
-
直接使用:
this.$store.dispatch('模块名/action名', 参数) -
map辅助函数
methods: {
...mapActions('模块名', ['xxx']),
...mapActions('模块名',{'新名字': 'xxx'})
}
Getter
-
直接全局使用:
this.$store.getters[xxx] -
map辅助函数
computed:{
...mapGetter('模块名',['xxx'])
...mapGetter('模块名',{'新名字':'xxx'})
}
