vuex详解_vuex图「建议收藏」
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说vuex详解_vuex图「建议收藏」,希望能够帮助你!!!。
一、简介
我们来看看对Vuex比较专业的介绍：
Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简而言之，Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。
二、优点
Vuex状态管理跟使用传统全局变量的不同之处：
Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。
三、步骤
1.安装Vuex
npm install vuex --save
12.引用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
1233.创建仓库Store
要使用Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。
//创建一个 store
const store = new Vuex.Store({});
12
主要包括以下几个模块
- State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
- Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
- Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
- Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
- Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。
.
1. State
假设我们有一个全局状态count的值为5。那么，我们就可以将其定义为 state 对象中的key和value，作为全局状态供我们使用。如下：
//创建一个 store
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
}
});
1234567.
2. Getters
可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等
假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters
getters 接受 state 作为其第一个参数
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
},
getters:{
newCount:state => state.count * 3
}
});
123456789在组件中获取{{newCount}}方式：
export default {
computed: {
newCount(){
return this.$store.getters.newCount;
}
}
};
1234567.
3. Mutations
Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation ，且必须是同步函数
我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方
会接受 state作为第一个参数，第二个是自定义传参
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数：5
},
mutations:{
increment(state，value){
state.count += value;
}
}
});
1234567891011我们在提交commit时候，字符串参数increment,就是对应在 mutations中的increment。
一般通过方法或钩子触发，例如：
methods: {
getVal(event) {
//获取当前的按键的值
let value = event.target.dataset.value;
//通过commit提交一个名为increment的mutation
this.$store.commit("increment", value);
}
}
12345678在组件中获取{{count}}方式：
export default {
computed: {
count(){
return this.$store.state.count;
}
}
};
1234567.
4. Action
用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下：
export default new Vuex.Store({
//存放数据
state: {
obj: {},
},
//4.通过commit mutations中的方法来处理
mutations: {
getParam (state,Object) {
//5.修改state中的数据
state.obj= Object
}
},
//2.接受dispatch传递过来的方法和参数
actions: {
getParamSync (context,Object) {
//处理异步操作
setTimeout(()=>{
//3.通过commit提交一个名为getParam的mutation
//action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
context.commit('getParam',Object)
},3000)
}
}
})
12345678910111213141516171819202122232425然后我们就在组件里这么调用就可以了
methods: {
getVal() {
let name= 'xia';
let age= '26';
let sex= 'man';
//1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
this.$store.dispatch('getParamSync',{name,age,sex})
}
}
123456789.
5. Modules
随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'
import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B
Vue.use(Vuex)
export default new Vuex.Store({
actions,
getters,
state,
mutations,
modules: {
moduleA,
moduleB
}
})
12345678910111213141516171819202122moduleA.js / moduleB.js 文件
// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
state: {
text: 'moduleA'
},
getters: {},
mutations: {},
actions: {}
}
123456789然后我们就在组件里这么调用就可以了
<template>
<div class="demo">
<h1>{{getText1}}</h1>
<h1>{{getText2}}</h1>
</div>
</template>
123456computed: {
getText1(){
return this.$store.state.moduleA.text;
},
//或
...mapState({
getText2: state => state.moduleB.text;
})
}
123456789由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。
vuex最最简单的项目实例
运用vuex语法糖mapMutations和mapGetters
1.存储数据( a.vue文件 )
import { mapMutations } from "vuex"; // 引入mapMutations
export default {
methods: {
...mapMutations({
// 将changeNews与mutations中的SET_NEWS关联
changeNews: "SET_NEWS"
}),
submit(){
// 提交一个名为changeNews的mutation，并传入参数val
let val = 'test news';
this.changeNews(val);// 相当于this.$store.commit("changeNews", val);
}
}
}
1234567891011121314.
2.获取数据( b.vue文件 )
import { mapGetters } from "vuex"; // 引入mapGetters
export default {
computed: {
// 用vuex读取数据(读取的是getters.js中的数据)
// 相当于this.$store.getters.news(vuex语法糖)
...mapGetters(["news"])
},
created() {
// 获取getters中news数据
console.log(this.news);
}
}
123456789101112.
3.store文件目录结构
index.js:
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'
//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug, // 当debug=true时开启严格模式(性能有损耗)
plugins: debug ? [createLogger()] : []
})
12345678910111213141516171819202122.
state.js:
const state = {
news: {}
}
export default state
12345.
mutations.js:
const mutations = {
SET_NEWS(state, val) {
state.news= val
}
}
export default mutations
1234567.
actions.js:
//异步处理
const actions = {
M_NEWS({ commit }, val) {
commit('SET_NEWS', val); // commit mutations修改
}
}
export default actions
12345678.
getters.js:
// 通常通过getters取数据 (this.$store.getters.news;)
export const news = state => state.news // 不做其他处理 直接映射出去
12.
4.使用store
在main.js中引用
import store from './store' //vuex存储文件
...
...
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
