vue - vuex的定义和使用 （自我理解）
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
- Vuex 的规则使用方法更加趋近于react，有规定的数据储存和修改、改变的方法，尽管其它state内数据在各处都能修改，但Vuex有自己的规则
- Vuex官网 有更加详细的介绍 在此我只写简单常用的部分内容，如后需要，另行删增。
store.js
//导入文件
import Vue from 'vue'
// 导入 vuex
import Vuex from "vuex"
Vue.use(Vuex)
// 创建实例仓库
var store = new Vuex.Store({
state:{
//相当一vue中的data
},
getters:{
//this.$stort.gerrers.*** 相当于vue中的 computed（计算属性）或filters（过滤器）
},
mutations:{
//相当于vue中的methods ，用来控制state中定义的变量，类似于父子之间传值
},
actions:{
// actions:行动动作 , 完成复杂的运算方法、处理数据. Action 提交的是 mutation，而不是直接变更state内状态
},
})
// 把路由对象暴露出去
export default store
index.vue
store 解析
state
- 储存变量的仓库
- 类似于vue中的data数据 :
data() {
return { };
}
- 更加类似于react中的state :
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { //react 的数据储存仓库
seconds: 0
};
}
}
在vue中data 中的数据可以在方法中直接通过this直接改变，而在react中想要更改state中的数据必须通过“this.setState({ }) 才能修改”
Vuex 中的state 也类似于vue中的data一样，可以随意修改，但是使用规则是你必须通过
mutations才能修改。-
vue页面接收state中的数据
- this.$store.state 可以获取 state中的数据，但是Vuex不提倡、也最好不要这样使用
- 通过
getters过滤获取state的数据 this.$store.getters.
getters (获得)
- 相当于vue中的 computed（计算属性） 或 filters（过滤器） 更趋近于
computed
// vue
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
// Vuex
// Getter 接受 state 作为其第一个参数：
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
- Getter 也可以接受其他 getter 作为第二个参数：
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
//第二个参数相当于获取getters内所有值，包括自己 ，但那样会无限循环
获取
getters即变相获取state中的值-
vue页面接收getters中的数据
this.$store.getters.doneTodosCount- getters只读state数据，不进行修改
mutations （突变、变化）
- 用来控制state中定义的变量 ， 和react中的setState({})类似
- 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
- 它会接受 state 作为第一个参数
- 用法
this.$store.commit('名称' , {})
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count = state.count + 1
}
}
})
-
mutations和Action有点相似- 不过
mutations定义为修改state数据的，术业有专攻。 -
mutations能进行简单的数据处理，主要修改state -
Action当数据需要大量处理 ，或者同时修改多个state内数据时， -
Action也能修改state中数据，但建议不要这样做
- 不过
- commit vue中可以像是事件注册 ， 当触发一个类型为 increment 的 mutation 时，调用此函数：
// vue
this.$store.commit('increment' , {})
//mutations接收一个参数 ， 传参可以用对象，或者单个数据
Action （行动动作 ） 完成复杂的运算方法、处理数据
Action 提交的是 mutation，而不是直接变更状态。
actiom常用于进行复杂计算，或者同时修改多数state里的值，即同时调用多个
mutations用法
this.$store.dispatch("名称");注册一个简单的 action：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
// Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
// 可以通过 context.state 和 context.getters 来获取 state 和 getters
//同理可以通过解构参数如此调动
actions: {
increment ({ commit }) {
commit('increment')
}
}
Module
- 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
- 此处采用官网例子，然本人并未测试
- 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
Vuex 骨架亦可如此
如下：
import Vue from "vue";
import Vuex from "Vuex";
Vue.use(Vuex);
const state = {
configs: null,
examEList:[],
examCList:[],
};
const getters = {
getRootPath: state => state.configs,
};
const actions = {
clearItem({ commit }) {
commit("clearEItem");
commit("clearCItem");
}
};
const mutations = {
clearEItem(state) {
state.examEList = []
},
clearExamCompItem(state) {
state.examCList = []
}
};
export default new Vuex.Store({
state: state,
getters: getters,
actions: actions,
mutations: mutations
});