Vuex

一.安装Vuex

npm i vuex

二.Vuex工作原理

                                                                                                                                                                            

三.核心概念

1.共有4个状态值

1）.state 放数据的

2）.getters 监听属性 相当于 Vue 的 computed

3).mutations 事件处理函数

4).actions 触发函数

四.使用方法

1.在Vue组件中使用Vuex

1）.引用Vuex及触发 Vuex 方法

 

<template>
  <div class="hello">
    {{a}}                 //渲染方法和实例渲染一样
  </div>
</template>

<script>

import {mapGetters,mapActions} from 'Vuex'     //引用 Vuex  // mspGetters 是 Vuex 的 state 数据 // mapActions 触发 Vuex 中的事件

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['a'])                        // 把 Vuex 的 state数据 放到计算属性中进行监听得到最新数据  // a Vuex 中的某个数据
  }，
    methods：{
        ...mapActions(["increment"]), //increment 是 Vuex中的 actions的某个函数 和vue的 click事件使用方法一样
        click(){
          this.$store.dispath('click'，data)  触发Vuex事件 //click 是 Vue中的 actions 的某个执行函数 // data 传的数据
        }
    }
}
</script>

mapGetters 的详细使用方法 ： https://blog.csdn.net/XiaoHuangDiLHD/article/details/84310297

2.modules 的文件构建

1）.app.js代码格式

const app = {
  state: {a: 1111}, //state 放数据的 相当于Vue的 data
  mutaitions: { //事件处理函数
    SET_A: (state, data) => {  //state 当前模块的state存放的所有数据 // data 事件触发传的参数
      state.a= data
    },
},
  actions: {
    //在页面中 使用 this.$store.dispath('seta',data)来调用某个方法 //seta 触发的事件名 //data                 发送的数据可以是任何格式 比如 json字符串 数组 对象 等等
     seta({ commit },data) {
      commit('SET_A', data) //commit 通过该方法 去触发 mutations里的某个处理函数 // SET_A 
 处理函数的名称 // data 接收 this.$store.dispath() 传的 data 书架
    },
   }
}
export default app //暴露

2）.getters.js代码格式

const getters = {
  a: state => state.app.a    // a是要赋新值属性 state是所有模块的state数据 state.app具体哪个模块的数据 sate.app.a 该模块的数据

}
export default getters  //暴露

3）.index.js代码格式

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import a from './modules/a'     //和 app 是一样的
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    a
  },
  getters            
})
export default store// 暴露

4）.main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'         // Vuex

new Vue({
  el: '#app',
  router,                            //
  store,
  components: { App },
  template: '<App/>'
})