Vuex的用法

Vuex 的使用

安装

**1.安装依赖**npm install vuex --save**2.新建一个store文件，然后里面创建一个index.js文件****3.index.js文件里面写**import Vue from "vue"import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({})export default store**4.挂在到main.js中**import store from './store'Vue.prototype.$store=storeconst app = new Vue({    ...App,//挂载store})

State

组件中怎么用state两种方法

1.this.$store.state.全局数据名

**2.map方式**a.从vuex中引用mapstateimport {mapstate} from ' Vuex'b.在计算属性中，将全局属性，映射为组件的计算属性computed：{      ...mapstate(['全局数据名1' ，'全局数据名2'])}c.在页面中直接用全局数据名即可

Mutation

修改state的唯一方式
在nutation中增加方法修改state，第一个参数永远是state,第二个参数是传递的参数

mutation:{方法名（state,value）{state.count=value}}

1.在触发数据改变的组件中，绑定事件去触发mutation方法，方式为：组件通过 this.$store.commit(’mutation中改变state方法的方法名‘,参数值)   的方式去使用mutation修改state

或者采用map映射的方式去触发

**1.引入mapmutation**import {mapmutation} from 'Vuex'2.在组件中的methods中添加映射methods:{...mapmutation(['方法名1'，'方法名2'])组件中绑定的事件handle(){this.方法名1（）}}

Action

用于异步处理操作，
但是他不能直接修改state中的数据，他必须调用mutation中的方法可以修改state
通过actions中的context去触发commit,从而去修改state

actions:{方法名（context，参数）{   setTimeout(()=>{   context.commit('mutation中的方法名'，参数)   },500)}}

组件中触发action1.第一种触发方式methods:{handle(){this.$store.dispatch('actions中的方法名'，参数)}}

第二种触发方式从vuex中导入map函数import {mapActions} from 'Vuex'然后在methods中导入...mapActions(['actions中的方法名'])然后组件中的点击事件去调用这个这个方法名

Getter

Getter用于对state中的数据经行封装变换，相当于组件的计算属性，可以实现缓存，只有state数据变化，他才会从新计算。
参数也必须是state

在用map函数调用时，需要映射到组件的computed中

手机爆料