学习vue2.x store

一、安装

1. 项目根目录下执行以下命令：

npm install vuex --save

2. 在main.js中引用如下代码：

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

Vue.use(Vuex)

二、使用state

1. 获取状态对象

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

//store.js
computed: {
   
	count() {
   
	// this.$store.state.属性名
		return this.$store.state.count
	}
}

在 Vue 组件中， 可以通过 this.$store 访问store实例

//vue组件
methods: {
   
  increment() {
   
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

2. 更改状态

在store.js中定义mutation处理函数，如increment

//store.js
mutations: {
   
    increment (state) {
   
      // 变更状态
      state.count++
    }
  }

3. 触发状态变更

在组件中使用this.$store.commit('函数名')的方式唤醒一个mutation处理函数：

this.$store.commit('increment')

三、使用mutation

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

//store.js
const store = createStore({
   
  state: {
   
    count: 1
  },
  mutations: {
   
    increment (state