15分钟学会vuex。State、 Getter、Mutation 、Action简述

vuex作用：组件直接互相传值，存共享数据 （官方回答请看：Vuex 是什么？ | Vuex）

vuex中的五个属性：State、 Getter、Mutation 、Action、 Module 

目录

State：定义变量，暴漏出去，让所有页面都可以拿到值

mutations：专门存放修改store的函数。mutations有2个参数，第一个默认为state，接下来的为自定义参数

Action：异步请求。有2个参数，第一个默认为context(整个store的配置，可以打印一下)，接下来的为自定义参数

Getter：获取、计算state。属于state的计算属性，可以理解类似于Vue中computed

---

State：定义变量，暴漏出去，让所有页面都可以拿到值

安装：npm install vuex --save

1、创建store文件夹，创建index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

const state = {
	count:100
}
export default new Vuex.Store({
	state
})

2、main.js中引用 （这里是为了防止在各个组件中引用，因为main.js中，有我们的new Vue 实例啊！）

import Vue from 'vue';
import Vuex from 'vuex'; //引用的
import App from './App';
import router from './router';
import store from './store/index.js';//引用的

Vue.use(Vuex);

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

3、页面中使用

<template>
  <div>
    {{$store.state.count}}  // 会输出==>  100
  </div>
</template>

mutations：专门存放修改store的函数。mutations有2个参数，第一个默认为state，接下来的为自定义参数

1、在之前创建的store文件夹中的index.js中创建mutations

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

const state = {
	count: 100
}
const mutations = { //创建
    mutationsAdd(state, n = 0) {
        return (state.count += n)
    },
    mutationsReduce(state, n = 0) {
        return (state.count -= n)
    }
}
export default new Vuex.Store({
	state,
	mutations //导出
})

2、在页面中使用 （点击button就可以加减store了）

<template>
  <div>
    {{$store.state.count}}
    <button @click="add">+</button> <!--添加事件-->
    <button @click="reduce">-</button>
  </div>
</template>
<script>
export default {
  methods:{
    add(){
      this.$store.commit('mutationsAdd',11) //commit是调用mutation的方法
    },
    reduce(){
      this.$store.commit('mutationsReduce',11)
    }
  }
}
</script>
  

Action：异步请求。有2个参数，第一个默认为store(整个store的配置，可以打印一下)，接下来的为自定义参数

1、在之前创建的store文件夹中的index.js中创建action

tip:操作页面的时候，如果有异步操作，那么先在页面中调用action，action中再调用mutation，使用mutation中的方法修改state。

vuex是一个很有规律的东西，每个属性只负责自己的那点东西，互不干涉。想要修改state就只能通过过mutation修改。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

const state = {
	count: 100
}
const mutations = {
    mutationsAdd(state, n = 0) {
        return (state.count += n)
    },
    mutationsReduce(state, n = 0) {
        return (state.count -= n)
    }
}
const actions = { //新创建的
    actionsAdd(store, n = 0) {
        console.log(context)
        return store.commit('mutationsAdd', n)
    },
    actionsReduce({ commit }, n = 0) {
        return commit('mutationsReduce', n)
    }
}
export default new Vuex.Store({
	state,
	mutations,
	actions //导出
})

2、在页面中使用 （点击button就可以加减store了）

<template>
  <div>
    {{$store.state.count}}
    <button @click="add">+</button> <!--添加事件-->
    <button @click="reduce">-</button>
  </div>
</template>
<script>
export default {
  methods:{
    add(){
      // this.$store.commit('mutationsAdd',11)  这时之前调用mutation中的方法修改state
      this.$store.dispatch('actionsAdd',11)  //调用action中的方法用dispatch
    },
    reduce(){
      // this.$store.commit('mutationsReduce',11)
      this.$store.dispatch('actionsReduce',11)
    }
  }
}
</script>

Getter：获取、计算state。属于state的计算属性，可以理解类似于Vue中computed

1、在之前创建的store文件夹中的index.js中创建getter

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

const state = {
	count: 100,
	todos: [
		{ id: 1, text: '水果类'},
		{ id: 2, text: '苹果' },
	]
}
const mutations = {
    mutationsAdd(state, n = 0) {
        return (state.count += n)
    },
    mutationsReduce(state, n = 0) {
        return (state.count -= n)
    }
}
const actions = {
    actionsAdd(store, n = 0) {
        console.log(store)
        return store.commit('mutationsAdd', n)
    },
    actionsReduce({ commit }, n = 0) {
        return commit('mutationsReduce', n)
    }
}
const getters = { //新增的getter
    Todos: state => {//通过方法访问
		return state.todos.filter(todo => todo )
	},
	TodosCount: (state, getters) => {//通过属性访问
		return getters.doneTodos.length
	}
}
export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters //导出
})

2、页面中使用

<template>
  <div>
    <P>通过方法访问：{{todos}}</p>
    通过属性访问：{{doneTodosCount}}
  </div>
</template>
<script>
export default {
  computed:{
    todos:function() {  //通过方法访问
      return this.$store.getters.Todos;
    },
    doneTodosCount () { //通过属性访问
      return this.$store.getters.TodosCount
	}
  },
}
</script>
  

自己一个字一个字码的，看懂的求赞。转走的放我链接

如果有写错的地方，求指导