vue 状态管理

vueX简介

vuex,官方定义为状态管理,其实这个状态管理,和H5本地缓存的作用很相似,通俗的讲,就是存储一些公用的东西,提供给各个组件使用,和服务器端的session功能也很类似。不同的是,vuex在刷新页面的时候,会自动还原到初始的状态。

安装使用

npm 安装Vuex

npm i vuex -s

在项目的根目录下新增一个store文件夹,在该文件夹内创建index.js

初始化store下index.js内容

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

export default store

修改main.js 将store挂载载vue实例中

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

在组件中使用vuex

例如在App.vue中,我们要将state中定义的name拿来在h1标签中显示

<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.name }}</h1>
    </div>
</template>

或者要在组件方法中使用

...,
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
...

VueX

成员列表

  • state : 存放状态
  • mutations state : 成员操作
  • getters: 加工state 成员给外界
  • actions: 异步操作
  • modules: 模块化状态管理

Mutations

mutations是操作state数据的方法的集合,比如对该数据的修改、增加、删除等等。

Getters

可以对state中的成员加工后传递给外界。

Actions

Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。

module

module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。

Nuxt使用Vuex

  • Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。
  • Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:
    • 引用 vuex 模块
    • vuex 模块 加到 vendors 构建配置中去
    • 设置 Vue 根实例的 store 配置项
  • Nuxt.js 支持两种使用 store 的方式
    • 普通方式: store/index.js 返回一个 Vuex.Store 实例
    • 模块方式: store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 (当然,index 是根模块)

store 普通方式

使用普通方式的状态树,需要添加 store/index.js 文件,并对外暴露一个 Vuex.Store 实例:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store({

  state: {
    counter: 0
  },
  mutations: {
    increment (state) {
      state.counter++
    }
  }
})

export default store

现在我们可以在组件里面通过 this.$store 来使用状态树

<template>
    <button @click="$store.commit('increment')">{{ $store.state.counter }}</button>
</template>

store 模块方式

store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块

在根目录下的store文件夹下创建js文件即可(Nuxt使用模块化,js文件的文件名即为模块名),不需要使用index.js文件。

实例

75

export const state = () => ({	//state里面存放的是变量,如果你要注册全局变量,写这里
    isLogin:false,
});
/*const getters = {     //getters相当于是state的计算属性,如果你需要将变量的值进行计算,然后输出,写这里
include: (state) => (val) => {
return state.list.indexOf(val) > -1;
}
}
;*/
const mutations = {       //修改store中的变量的方法,如果你要改变变量的值,就写这(vuex中state中的值不能直接修改)
    SET_isLogin(state, value) {
        state.isLogin = value;
    }
};
/*const actions = {//actions提交的是mutations,相当于就是改变变量的方法的重写,但是,actions是可以进行异步操作的
async SET_isLogin({state, commit}, val) {
commit('SET_isLogin', val);
}
};*/

export default {
    namespaced:true,//命名空间
    state,//这里你用到了哪几个属性就写哪几个,不需要的可以注释掉
    // getters,
    // actions,
    mutations
};

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×