每日总结(14)

所用时间:晚上两小时

代码:100

博客:1

知识点:

vuex的基本使用

安装:npm install vuex@3/4

main中配置

 

index.js中

 State

 在vuex中state中定义数据，可以在任何组件中进行调用

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {

    count:0
  },
})

this.$store.state.全局数据名称

Getter 接受 state 作为其第一个参数：

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

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

const store = createStore({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)