vuex的使用

vuex的五个属性

1.state – 存放状态
2.getters – state的计算属性
3.mutations – 更改状态的逻辑，同步操作
4.actions – 提交mutation，异步操作
5.mudules – 将store模块化

使用

const store = new Vuex.Store({
  state: {
    info: {"name":"我是vuex","id":1,"Name":"张三"}
  }
})

1、在组件中可以使用来获取vuex中公共的state的值

this.$store.state.info.Name;//"张三"

也可以使用以下来取值

import { mapState, mapGetters,mapActions, mapMutations } from "vuex";
 mounted() {
    console.log(mapState);
  },
  computed: {
    ...mapGetters(["getStudentLength"])
  },
  methods:{
  	 ...mapMutations(['sub']),
    ...mapActions(['addA'])
  }

2、在组件中修改vuex中的state的值

//第一种方法：在组件中
<button type="button"  @click="newName"></button>
methods: {
    newName: function() {
      this.$store.commit('newName', this.newValue)//通过commit调取vuex中的newName事件来修改
    }
  }
  //第二种方法：在组件中
   methods:{
  ...mapMutation(['add','add2'])//这样就能直接创建store中定义在mutations的方法了。
	this.newName(this.newValue)
  }

//在vuex中
 mutations: {
    newName(state,msg) {
      state.info.Name = msg;
    }
  }

3、通过actions来修改vuex中state的值

方法一、
 ...mapActions(['saveDbSource'])//先引入actions里的方法
 this.saveDbSource//使用
 
 方法二、
this.$store.dispatch('saveDbSource', this.DbSource);//通过dispatch调用actions里的saveDbSource

vuex中
actions:{
     saveDbSource(context,num){ //context：上下文对象，这里你可以理解称store本身。
       context.commit('newName',num)//通过调用mutations里是newName方法来改变vuex中的state。
       //这边就是调用mutations的方法，这样才能异步，不要直接调用state中的数据。
       }
}

总结：

1、state：负责状态管理，类似于vue中的data，用于初始化数据 //状态管理

2、mutation：专用于修改state中的数据，通过commit触发 //修改state

3、action：可以处理异步，通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值 //异步操作

4、getter：Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter

5、module：模块化管理 //模块

// 导入vue及vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 挂载vuex
Vue.use(Vuex)

// 创建vuex对象并向外暴露
export default new Vuex.Store({
  state: {
  // 全局属性变量
  },
  mutations: {
   // 全局同步方法, 调用方法,this.$store.commit("xxx")
  },
  actions: {
   // 异步方法 调用方法,this.$store.dispatch("xxx") 
  },
  getters: {
   // Vuex属性计算,在视图里面当变量使用
  },
  modules: {
   // 模块化注册
  }
})