vuex存储数据a组件获取的到数据b组件获取不到_vuex详解

一、简介

我们来看看对Vuex比较专业的介绍：

Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简而言之，Vuex采用类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改(不能自己随意用自己的方式来修改)。

---

二、优点

Vuex状态管理跟使用传统全局变量的不同之处：

Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。

不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交(commint)mutations来实现修改(没了解过这里没关系，下一节前端君会有介绍)。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

---

三、步骤

1.安装Vuex

npm install vuex --save1

2.引用Vuex

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)123

3.创建仓库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' // 模块Aimport moduleB from './module/moduleB' // 模块BVue.use(Vuex)export default new Vuex.Store({    actions,    getters,    state,    mutations,    modules: {        moduleA,        moduleB    }})12345678910111213141516171819202122

moduleA.js / moduleB.js 文件

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块export default {    state: {        text: 'moduleA'    },    getters: {},    mutations: {},    actions: {}}123456789

然后我们就在组件里这么调用就可以了

{{getText1}}

{{getText2}}

123456

computed: {    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"; // 引入mapMutationsexport default {methods: {...mapMutations({    // 将changeNews与mutations中的SET_NEWS关联    changeNews: "SET_NEWS"}),submit(){// 提交一个名为changeNews的mutation，并传入参数vallet 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都会在控制台打印logimport 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 state12345

.

mutations.js:

const mutations = {SET_NEWS(state, val) {state.news= val}}export default mutations1234567

.

actions.js:

//异步处理const actions = {    M_NEWS({ commit }, val) {        commit('SET_NEWS', val);  // commit mutations修改    }}export default actions12345678

.

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: ''})