vue2中vuex的封装及使用

相信大家在使用vue2开发的时候状态管理vuex是必不可少的
vuex 主要包括：

1、state基本数据(数据源存放地) 2、Getter 过滤/计数。store 的计算属性
返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 3、mutation 更改 Vuex 的 store
中的状态的唯一方法是提交 mutation 必须是同步函数 4、Action 类似于 mutation 提交的是
mutation，而不是直接变更状态。 可以包含任意异步操作。 5、Module 将 store
分割成模块（module）。每个模块拥有自己的
state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

其中常用的主要是前四条
主要的版本为

“vue”: “^2.6.14”, “vue-router”: “^3.0.1”, “vuex”: “^3.4.0”
在main.js引入store
import store from ‘./store’

store下 index.js为总文件

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getters from './getters'
import mutations from './mutations'
import state from './state'
import infoModule from './modules/info'
Vue.use(Vuex)

// 创建 store 实例
export default new Vuex.Store({
   
    actions,
    getters,
    state, 
    mutations,
    modules: {
    
        info: infoModule 
    }
})

store下 state.js

const state = {
   
  ontType: '数据1',
  twoType: '测试一下',
}
export default state

store下 getters.js

const getters = {
   
    getOneType:state=>{
   
        return state.ontType
    },
    getTwoType:state=>{
   
        return state.twoType
    }