Vuex中内容作用语法等

Vuex - state

作用 ： 用来保存公共数据

定义公共数据  示例：

new Vuex.store({
  state: {
    // 属性名： 属性值
    name: 'tom'，
    skills: ['抖音', 'B站', '美团']
  }
})

使用公共数据 ： 

在组件中通过 this.$store.state.name 来访问

如果在模板中，则可以省略this 二直接写成 ： {{$store.state.skills[0]}}

vue-devtool调试工具

 

Vuex - mutations

作用：通过调用mutations来修改定义在state中的公共数据。

语法格式

1.注册格式

new Vue.store({
  // 省略其他...
  mutations：{
  	mutation名1：function(state [, 载荷]) {
  
    },
    mutation名2：function(state [, 载荷]) {
  
    },
	}
})
  //  每一项都是一个函数，可以申明两个形参：

  //  第一个参数是必须的，表示当前的state，
  //  第二个参数是可选的，表示载荷(在执行函数时要传入的数据)

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

 

2.提交格式

// 这里的commit是固定的方法

this.$store.commit('mutation名', 载荷)

示例

在 store/index.js 中，补充：

1. 数据项url

2. 更新数据项url的mutations

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {
    nickName: 'tom',
    age: 18,
    url: 'https://img10.360buyimg.com/img/jfs/t1/179086/40/4900/81664/60a47d6bE2bf6455e/208f5820c156d4ab.gif'
    // url: 'http://s02.mifile.cn/assets/static/image/logo-mi2.png',
  },
  // mutations: 中文是：变化，异动。
  //   在vuex中，用它提供修改数据的方法。 
  //   数据不应该在组件内部直接修改，必须在组件内调用mutations来修改
  mutations: {
    changeUrl(state, newUrl) {
      state.url = newUrl
    }
  }
}

在组建中调用

const url = 'http://s02.mifile.cn/assets/static/image/logo-mi2.png'
this.$store.commit('changeUrl', url)

注意：

参数只能有一个：下面的写法是不对的：

this.$store.commit('changeUrl', url, host) // host这个参数将无法被接收到 

如果希望传递复制的数据，第二个参数可以是对象，例如下面的写法

this.$store.commit('changeUrl', { url, host} )

 

Vuex- getters

作用 ：

有时候我们需要从 store 中的 state 中派生出一些状态(与组件中computed一样)。在state中的数据的基础上，进一步对数据进行加工得到新数据。

new Vuex.store({
  state: {
    // 属性名： 属性值
    name: 'tom'，
    skills: ['抖音', 'B站', '美团'],
    age: 18
  }
})

定义格式

new Vuex.store({
  // 省略其他...
  getters: {
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})

state 就是上边定义的公共数据state

使用格式

在组件中通过：$store.getters.getter 的名字 来访问

 

Vuex - actions

作用 ：我们可以使用Action来修改state，这一点是类似于 mutation的，不同在于：

1.action中可以通过调用 mutation来修改state，而不是直接变更状态。

2.action 可以包含任意异步(例如ajax请求)操作。

定义格式：

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store示例具有相同的方法和对象
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改/保存数据
      // context.commit('mutation名', 载荷)
    }
  }
})

调用格式：在组件中通过 this.$store.dispatch('actions的名字', 参数) 来调用action

将ajax请求放在actions中有两个好处：

1.代码得到了进一步封装。将发ajax和保存数据到vuex绑定在一起。

2.逻辑更通顺。如果数据需要保存在Vuex的state中，那从接口处获取数据的操作就定义在Vuex的actions中。

 

Vuex-modules

作用 ：拆分模板，把复杂的场景按模块来拆开

格式：

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	模块名1： {
    		// 这个为true，则在使用mutations时，就必须要加上模块名
      	namespaced: true, 
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	}，
    模块名2： {
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
         modules: {}
  	}  
  }
})

也可以更进一步对文件进行拆分。

|--store /
|------- index.js # 引入模块
|------- modules
|-------------- / mod1.js # 模块1
|-------------- / mod2.js # 模块2

 

访问数据和修改数据的调整

访问模块中的数据，要加上模块名

获取数据项：  {{$store.state.模块名.数据项名}}
获取getters： {{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions:

1. 如果namespaced为true，则需要额外去补充模块名

2. 如果namespaced为false，则不需要额外补充模块名这

$store.commit('mutations名')        // namespaced为false
$store.commit('模块名/mutations名')  // namespaced为true