vuex基本使用

一、什么是Vuex?

Vuex是一个专为vue.js应用程序开发的状态管理模式。

当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。

二、Vuex的五个核心概念

State：基本数据，数据存放地。

Getters：从基本数据派生出来的数据

Mutations：提交更改数据的方法（同步），通过commit触发。

Actions：提交更改数据的方法（同步），通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值。

Modules：模块化管理

三、基本使用

1、安装vuex

npm install vuex --save

2、在src目录下创建store文件夹，并在文件夹下新建index.js

 
// 导入vue及vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 挂载vuex
Vue.use(Vuex)
 
// 创建vuex对象并向外暴露
export default new Vuex.Store({
 // 我们在Store里面定义一个state这么一个属性
 state: {
    count: 1 // 它里面有个count这样的字段，值是1
    data: 1,
  },
  // 同步方法, 调用方法,this.$store.commit("xxx")
  mutations: {
   increment (state) {
      // 变更状态
      state.count++
    },
    changeDataMut(state,params){  
      state.data = params;
    },
  },
  // 异步方法 调用方法,this.$store.dispatch("xxx") 
  actions: {
  	changeDataAct(context,params){  //触发mutations里的方法，action不能直接修改state里的数据
       let {commit} = context;
       commit('changeDataMut',params);
     }
  },
  //相当于computer计算属性
  getters: {
  },
  // 模块化注册
  modules: {
  }
})

3、挂载（main.js）

import store from './store/index.js'
Vue.prototype.$store = store

4、组件中使用

<template>
  <div>
  	{{this.$store.state.count}} 
  </div>
</template>
 
<script>
export default {
   
}
</script>
<style scoped>
</style>

5、修改state中的数据

<template>
  <div>
  
  	<div>{{this.$store.state.count}}</div>
  	<button @click='changeData1'>+</button>
  	
  	<div>{{this.$store.state.data}}</div>
  	<button @click='changeData2'>点击</button>
  	
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  methods: {
    changeData1() {
      // 通过commit 触发 mutation 
      this.$store.commit("increment"); 
    },
    changeData2() {
        // 通过commit 触发 action 并传参
      this.$store.dispatch('changeDataAct',100);
    },},
};
</script>
<style scoped>
</style>```