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.default
return 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)