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