VueX 学习笔记

概念

state：

state就是全局的状态（数据源），统一管理vue全局数据的流转与同步

getters：

getters类似于computed的计算属性，是store的计算属性

mutations：

只有mutations可以操作state并改变state的状态值（仅支持同步）
通过传入state参数获取state和getters
使用commit方法改变state

actions：

1. mutations的异步方法
2. action是通过改变mutations来修改state状态值
3. 通过commit方式提交mutations，并不直接改变state
4. 通过传入context参数获取state和getters，与store具有相同方法和属性的对象
5. 使用dispatch改变mutation从而改变state

配置

目录结构

image.png

stroe：全局vuex根目录

全局配置（index.js）

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

import state from './state'
import actions from './action'
import getters from './getter'
import mutations from './mutations'

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations
})

全局状态：

1. state（state.js）

定义state

export default {
  test:'这是原始state数据'
}

页面使用state

<h1>{{ msg }}{{$store.state.test}}</h1>

js获取state

console.log(this.$store.state.test)

2.getters(getter.js)

定义getters

export default {
  gettersfn(state){
    return state.test = '这是更改后的信息'
  }
}

使用getters

console.log(this.$store.getters.gettersfn)

3.mutations(mutations.js)

定义mutations

export default {
  mutationsTest(state){
    state.test = '这是mutations更改后的值'
  }
}

使用mutations

<el-button type="success" @click="clickMutations()">mutations</el-button>
methods:{
  clickMutations(){
    this.$store.commit('mutationsTest')
  },
},

4.action(action.js)

定义action(现在mutation.js中定义准备异步的mutation方法)

export default {
  mutationsTestForAction(state){
    state.test = '这是action更改mutations后的值'
  }
}

在action.js中提交异步的mutations

export default {
  testAsync(context){
    setTimeout(() => {
      context.commit('mutationsTestForAction')
    }, 1000)
  }
}

使用action

<el-button type="info" @click="clickActions()">actions</el-button>
methods:{
  clickActions(){
    this.$store.dispatch('testAsync')
  },
},

模块化的vuex

目录结构

image.png

navHeader：组件相对应在store下的vuex模块

1. 配置module(index.js)

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

/**
 * vuex模块
 */
import navHeader from './navHeader/navHeaderStore'
import menus from './menus/menusStore'

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    navHeader: navHeader,
    menus: menus,
  }
})

2.模块化的state、action、mutations、getters(navHeaderStore.js)

export default{
  state: {
    navHeader:'这是头部导航的state'
  },
  // 状态值的改变方法,操作状态值
  // 提交mutations是更改Vuex状态的唯一方法
  mutations: {
    navHeaderMutationsTest(state){
      state.navHeader = '这是navHeaderMutations更改后的值'
    },
    navHeaderMutationsActionsTest(state){
      state.navHeader = '这是navHeaderMutationsActionsTest更改后的值'
    }
  },
  // 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数
  getters: {

  },
  actions: {
    testAsyncNavHeader(context){
      setTimeout(() => {
        context.commit('navHeaderMutationsActionsTest')
      }, 1000)
    }
  }
}

navHeaderStore.js使用(在组件navHeader.vue中使用)

<h1 style="color: #fff;">{{$store.state.navHeader.navHeader}}</h1>
<el-button type="success" @click="navHeaderClickMutations()">mutations</el-button>
<el-button type="success" @click="navHeaderClickActions()">mutations</el-button>
methods:{
   navHeaderClickMutations(){
     this.$store.commit('navHeaderMutationsTest')
   },
   navHeaderClickActions(){
     this.$store.dispatch('testAsyncNavHeader')
   },
 }