VueX属性及使用方法

state

用法和作用类似vue实例中的data

基本方式：
$store.state.数据名称
第二种方式：
导入mapState
在计算属性中使用mapState
模板中可以直接使用计算属性
扩展运算符可以展开对象

|

mutations

定义方法，参数为state对象，在方法内部修改数据 触发方法，执行修改操作，

基本方式：
this.$store.commit('add')
第二种方式：
导入mapMutations
在methods中使用mapMutations
模板中直接调用方法即可
函数传参，只能传递一个参数，如果想传递多个参数，可以使用对象

|

actions

不能在mutation中处理异步任务 ------ 虽然修改state能够成功, 但vue-dev-tools无法同步调试
定义异步方法，参数为context对象

基本方法：
this.$store.dispatch('addAsync')
第二种方法：
导入mapActions
在methods中使用mapActions
模板中直接调用方法即可
dispatch的时候传递参数, actions定义的方法接收参数即可、
注意: 只能接收一个参数. 如果想传递多个参数, 可以放在一个对象中来传递
注意: 异步方法中如果要修改数据, 仍然要调用mutations中声明的方法

|

getters

作用: 当读取的值需要进一步处理之后再返回时, 可以用getters, 有点像计算属性 定义一个方法, 接收state作为参数,
return返回处理完成的结果

基本方法：
$store.getters.showNum
第二种方法：
导入mapGetters
在计算属性中使用mapGetters

|
|
|
|

VUEX安装

运行命令：npm install vuex --save

|

新建store文件夹

src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js

路径参考

│  App.vue
│  main.js
│
├─assets
│      logo.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
       index.js
       

|

初始化store下index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {}, // 全局属性
  getters: {}, // 加工state成员给外界
  mutations: {}, // 成员操作
  actions: {}, // 异步操作
  modules: {} // 模块化状态管理
})
export default store

|
|

在 main.js里面引入store，然后全局注入一下，这样就可以在任何一个组件里面使用this.$store了

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

Vue.config.productionTip = false

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

|

在组件中使用 state

直接使用
this.$store.state

引入 mapState（使用辅助函数）
import { mapState } from 'vuex'
computed: {
    // 设置别名，起到简化代码的作用
    // 推荐使用第三种方法，简单
    // 方法一：
    // ...mapState({
    //   Id: state => state.id,
    //   name:state => state.name
    // }),
    // 方法二：// 设置别名，使用的时候要使用别名
    // ...mapState({
    //   Id: 'id',
    //   name:'name'
    // }),
    // 方法三
    ...mapState(['id','name']),
  },

|
|

在组件中使用 mutations

直接使用
this.$store.commit('changeName')

引入 mapMutations (使用辅助函数)
import { mapMutations } from 'vuex'


methods:{
    ...mapMutations(['changeName'])  // 直接在需要触发的事件的元素后面写vuex中的方法名就可以直接使用了
}

|
|

在组件中使用 Getter

直接使用
this.$store.getters.doneTodosCount

引入mapGetter (使用辅助函数)
import { mapGetter } from 'vuex'


computed: {
    ...mapGetter(['watch'])
}

在组件中使用 actions

让我们来注册一个简单的 action：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

实践中，我们会经常用到 ES2015 的 参数解构 (opens new window)来简化代码（特别是我们需要调用 commit
很多次的时候）：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

Action 通过 store.dispatch 方法触发： store.dispatch(‘increment’)

|
看上去好像多此一举，不能直接使用mutations吗，但你可能会忘了，mutations只能执行同步操作，而Actions可以执行异步操作

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Actions 支持同样的载荷方式和对象方式进行分发：

以载荷形式分发

store.dispatch('incrementAsync', {
  amount: 10
})

以对象形式分发

store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

在组件中分发 Action

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}