Vuex详解（一） Vuex的使用详解

Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens new
window))”而存在。这也意味着，每个应用将仅仅包含一个 store
实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

1. Vuex起步

安装Vuex，由于笔者仍然使用vue2，故在安装时：

npm i vuex@^3.0.0 -s

创建store.js:

import Vuex from 'vuex'
import Vue from "vue";

Vue.use(Vuex)

// const store = new Vuex.Store({
   
//   state: {
   
//     count: 0
//   },
//   mutations: {
   
//     updateCount (state, num) {
   
//       state.count = num
//     }
//   }
// })
//
// export default store


//当使用服务端渲染的时候，防止内存溢出，
// 返回一个store的工厂函数，每当一个请求发起，
// 我们就创建一个store，当请求关闭，创建的store也被销毁。
export default () => {
   
  return new Vuex.Store({
   
    state: {
   
      count: 0
    },
    mutations: {
   
      updateCount (state, num) {
   
        state.count = num
      }
    }
  })
}

如果返回的是一个创建store的工厂函数，那么我们在main.js中就应该：

...
import createRouter from './router/router.js'
let store = createStore()
...
new Vue({
   
  el:'#app',
  store,
  render:(h)=>h(App)
})
...

store具有一个state属性，state是一个对象，其中就是我们存储的数据。现在，我们在state中初始化了一个名为count的变量，其值为1。
我们如何在组件中使用count呢？
App.vue:

mounted() {
   
    console.log(this.$store.state.count);
}

我们可以在控制台看见输出了0。

如果我们想更改count的值呢？

mounted() {