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=store
const app = new Vue({
    ...App,
	//挂载
	store
})

State

组件中怎么用state两种方法

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

**2.map方式**

a.从vuex中引用mapstate
import {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)
}
}

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

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

Getter

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

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