vuex新手入门步骤以及使用详解

1.npm install vuex --save
2.根目录建立store.js
3.在store.js里面写:
Import Vue from ‘vue’
Import Vuex from ’vuex’
Vue.use(Vuex)
export default new Vuex.store({
state:{ //存放唯一的公共数据源,存放的为全局共享的数据};
mutation:{};
action:{}
})
4.在App.vue中:
import store from ‘…/store.js’;
接着挂载:
new Vue({
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
})
5.在组件中引入全局变量:
方式一:使用{ {this.$store.state.全局名称}}
方式二:
在这里插入图片描述

6.//this.$store.state.count++ 这种写法错误,不推荐组将直接修改state中的变量.完全错误。
//这种方式不利于后期的维护

7.Mutation用于变更Store中的数据(!只有mutations中的函数才有权力修改state中的数据)
在这里插入图片描述
8.Mutation.变更Store中数据并且传参
在这里插入图片描述
9.触发mutation的第二种方式:
在这里插入图片描述
10.绝对不能再Mutation中执行异步操作

11.Action:用于处理异步任务,异步操作必须通过Action。通过在Action中还是要通过触发Mutation的方式间接变更数据。
第一种方式:
this.$store.dispatch(“”)
在这里插入图片描述
12.触发actions异步任务时携带参数:
在这里插入图片描述
13.触发actions异步任务第二种方式:
在这里插入图片描述
14.Getter(不会修改state中的数据,只是包装数据)
在这里插入图片描述
15.使用getters的两种方式:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/MJ1314MJ/article/details/109018336