VueX（Vue状态管理模式)

vuex是什么？

使用 props、事件等常用的父子组件的组件间通信方法，或者是通过事件总线来进行任意两个组件的通信。但是当应用逐渐复杂后，问题就开始出现了，这样的通信方式会导致数据流异常地混乱。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
• 它采用集中式存储管理应用的所有组件的状态，
• 并以相应的规则保证状态以一种可预测的方式发生变化
• 每一个 Vuex 应用的核心就是 store（仓库）。

vuex解决各组件间传值复杂或混乱的情况。
“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

应用vuex的好处

• 能够集中管理共享的数据，易于开发和后期的维护
• 高效的实现组件之间的数据共享，提高开发效率
• 存在vuex的数据也是响应式的，能够实时保持数据与页面的同步

vuex的缺点是：
刷新浏览器，vuex中的state会重新变为初始状态
解决方案 使用插件 vuex-along ,vuex-persistedstate

插件下载地址：https://github.com/robinvdvleuten/vuex-persistedstate

应用场景

多个组件共享数据或者是跨组件传递数据时

vuex基本使用

• 安装

npm i vuex -s

• 导入vuex

import Vuex from 'vuex'
Vue.use(Vuex)

• 在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js并编写

const countAbout = {
 namespaced:true, //开启命名空间
 state:{x:1},
 mutations:{ ... },
 actions:{ ... },
 getters:{
 bigResult(state){
 return state.sum * 10
 }
 }
}
const store = new Vuex.Store({
 modules:{
 countAbout
 }
})

• main.js引入store并全局挂载store到vue上

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

VueX中的核心内容

在VueX对象中，其实不止有state,还有用来操作state中数据的方法集，以及当我们需要对state中的数据需要加工的方法集等等成员。

成员列表：

• state 存放状态
• mutations  操作state成员
• getters 加工state成员给外界
• actions 异步操作
• modules 模块化状态管理

Actions

异步操作 ，context 上下文(相当于箭头函数中的this)对象，value挂载参数。

action的存在就是为了让mutations中的方法能在异步操作中起作用。向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。

Actions中的方法有两个默认参数

• context 上下文(相当于箭头函数中的this)对象
• value挂载参数

actions:{
    jia(content,value){}
}

store配置：

const countAbout = {
 namespaced:true, //开启命名空间
 actions:{
    //content一个对象包含有state和commit属性等，value  参数
    jia(content,value){
      console.log('jia1',content)
      console.log('jia2',value)//1  要操作的参数
      content.commit('JAV',value)
    }
  },
  // mutations 操作state成员
  mutations:{
    JAV(state,value){
      console.log("+",state,value)
      state.result+=value;
    },
    JIAN(state,value){
      state.result-=value
    }
  },
  state:{
    result:100,
    name:'xilin',
    school:'广西'
  },
  // 可以对state中的成员加工后传递给外界
  getters:{
    bigResult(state){
      return state.result*10;
    }
  },
}
const store = new Vuex.Store({
 modules:{
 countAbout
 }
})

 页面引用：

// 引入辅助函数

import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'

 methods: {
    //方法辅助函数
    ...mapActions('countAbout',['jia']) ,
    ...mapMutations('countAbout',['JIAN']),

    addHandelr(v){
      // this.$store.dispatch('jia', v)
      this.jia(v)
    },
    jianHandelr(v){
      // 直接省略状态提交定义 但要在mutations定义JIAN
      // this.$store.commit('JIAN', v)
      this.JIAN(v)
    },
}