1、文件结构
2、modules 文件内容
例子: ccc.js 文件内容如下:
// 基础配置项
const state = {aa: []
}const mutations = {setaa (state, data) {state.aa= data}
}const actions = {}
export default {namespaced: true, state,mutations,actions
}
**注意:::**
// namespaced为true的作用是告诉vuex,该模块所有的state 、mutations、actions里面的东西调用时都需要加上命名空间,这个命名空间就是该模块被improt时命名的名字。
3、getters.js 文件
const getters = {control: (state) => state.ccc.aa,// 此处为了 集合 gettees 数据 通过辅助函数使用: 注意写法 state.文件名字.参数名字(即哪个文件下的那个参数)
}
export default getters
4、index.js 文件:把state 和 getters 挂载到vuex 上
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'Vue.use(Vuex)const modulesFiles = require.context('./modules', true, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {// set './app.js' => 'app'const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')const value = modulesFiles(modulePath)modules[moduleName] = value.defaultreturn modules
}, {})const store = new Vuex.Store({modules,getters
})export default store
注意使用: 在vue文件中 引入 辅助函数
1、引入 import { mapGetters } from ‘vuex’
2、在计算属性 computed 使用 辅助函数即可,
computed: {...mapGetters(['control']), // 为getters 中的 字段名:::
}
参考:https://vuex.vuejs.org/zh/
vuex : 数据
1、state: 它便作为一个“唯一数据源 (SSOT)”而存在
2、getter: “getter”(可以认为是 store 的计算属性),第一个参数是 state,
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
3、Mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
并且它会接受 state 作为第一个参数
类似:methods:{ }
通过store.commit(‘方法名字’,参数二)进行更改 store 中的数据
4、Action: Action 类似于 mutation , 可以包含任意异步操作
Action 通过 store.dispatch 方法触发
store.dispatch(‘increment’)
使用 mapActions 辅助函数
5、Module :Vuex 允许我们将 store 分割成模块(module)