[JavaScript知识库]VueX（Vue状态管理模式)

vuex是什么？

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

应用vuex的好处

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

应用场景

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

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){}
}

使用：

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;
    }
  },