vuex

来源：互联网发布：软件项目管理流程图编辑：程序博客网时间：2024/05/15 23:48

什么是Vuex？

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

引入Vuex（前提是已经用Vue脚手架工具构建好项目）

利用npm包管理工具，进行安装 vuex。
```
npm install vuex --save
```
新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex，并使用
```
 import Vue from 'vue';   import Vuex from 'vuex';   Vue.use(Vuex);
```
在main.js 中引入新建的 vuex 文件，并在实例化 Vue 对象时加入 store 对象

   import store from './store/store_index'   new Vue({     el: '#app',     router,     store,//使用store     template: '<App/>',     components: { App }   })

目录结构

store
|____modules 每个模块一个文件
| |____first.js
|____mutation-types.js
|____store_index.js

store_index.js 文件代码示例

store_index 为入口文件，里面主要是引入各配置，供Vue使用

  import Vue from 'vue';  import Vuex from 'vuex';  import first from './modules/first'; // 引入模块文件  Vue.use(Vuex);   export default new Vuex.Store({    modules: { // 注册模块      firstModule: first    }  });

mutation-types.js 文件代码示例

  export const FIRST = { // 定义常量，一个模块一个常量    GET_DATA: 'getData', // 最好都大写    ADD_DATA: 'addData',    INIT_DATA: 'initData'  }

list.js 文件代码示例

 import {FIRST} from '../mutation_type'; // 引入常量  export default {      state: { // state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。      list: [],      msg: '我是第一个信息'      },      mutations: { // 更改state里的数据 只能是同步操作        [FIRST.GET_DATA](state,data){            state.list = data;        },        [FIRST.ADD_DATA](state,data){            state.list.push(data);            console.log(state.list)        },        [FIRST.INIT_DATA](state,data){            console.log("initData");            state.list=data;        }      },      getters: { // 获取数据并进行二次处理          getList: function (state) {              return state.list;          }      },      actions: { // 异步操作在这里          //设置延时          initD:function(context,value){              setTimeout(function(){                  var initD = ['初始化值1','初始化值2']; // 模拟从后台获取数据                  //提交事件                  context.commit('initData',initD); // 提交到mutations，让他改变数据              },1000)          }      }  }

vuex 数据的流向

获取状态, 在计算属性 computed 中获取

computed:{    msgOne(){        return this.$store.state.firstModule.msg; // 模块化store后，获取状态要加上模块名    },    list(){        return this.$store.getters.getList; // 获取getters处理过的数据    }}

改变状态

commit

 this.$store.commit('loginOut',data);

dispatch

this.$store.dispatch('getUserInfo',this.token);let redirect = decodeURIComponent(this.$route.query.redirect || '/'); // 得到进入登录页面的地址     this.$router.push({ // 登录成功后，返回进入登录的页面          path: redirect      })

context 与 dispatch:

context：context是与 store 实例具有相同方法和属性的对象。可以通过context.state和context.getters来获取 state 和 getters。

dispatch：翻译为‘派发、派遣’的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。

补充1

更改state的数据并显示在组件中，有几个步骤：

在mutations选项里，注册函数里面装逻辑代码。

在组件里，this.$store.commit(‘change’,payload) 注意：提交的函数名要一一对应。

触发函数，state就会相应更改。

在组件的计算属性里 this.$store.state 获取你想要得到的数据。

补充2

各个类型的 API各司其职，mutation 只管存，你给我（dispatch）我就存；action只管中间处理，处理完我就给你，你怎么存我不管；Getter 我只管取，我不改的。　

action放在了 methods 里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的）

mutation是写在store里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它。

getter写在了 computed 里面，这说明虽然 getter我们写的是函数，但是我们应该把它当成计算属性来用。

补充3

state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。

mutations：前面讲到的都是如何获取state的数据，那如何把数据存储到state中呢？在 Vuex store 中，实际改变状态(state) 的唯一方式是通过提交(commit) 一个 mutation。　　mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！

actions：进行所有的异步操作，然后通过 context.commit() 方法提交到mutations，让他改变数据

actions和mutations的区别:

Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。

Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下

阅读全文

0 0