中文文档

vuex基本概念

vuex是vue的状态管理工具，状态即数据。 状态管理就是管理vue中的数据

注意：

• 不是所有的场景都适用于vuex，只有在必要的时候才使用vuex,如果不必要，尽量别用
• 使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度

vuex的优点

• vuex用于解决组件通讯的问题
• vuex可以集中的管理vue项目中用到的所有数据

为什么要使用vuex

• 在大型的项目中，组件通讯会变得很混乱，使用vuex可以统一管理组件之间的通讯

vuex使用

store与state

• 安装

npm i vuex

• 引包

  <!-- 引包 -->
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script src="./node_modules/vuex/dist/vuex.js"></script>

• 使用

// 使用vuex
// 1.创建Store，用于存储数据和操作数据
const store = new Vuex.Store({
  //2. 指定state属性，用于提供数据
  // 状态，类似于data，用于提供数据
  state: {
    count: 1
  }
})

//3. 使用vuex中的数据
console.log(store.state.count)

mutations的使用

• 修改vuex中的数据，必须通过 mutations进行修改，不能直接修改

// 如果要修改state，需要在mutations的方法修改
mutations: {
  // 添加一个方法
  // state：表示state对象
  add (state) {
    state.count++
  }
}

//触发mutations
// 想要修改state，必须触发mutations提供的方法
store.commit('add')

• 带参数（Payload）

// 定义mutations
// 如果要修改state，需要在mutations的方法修改
mutations: {
  addNum (state, num) {
    state.count += num
  }
}

// 提交mutations
store.commit('addNum', 5)

• payload载荷应该是一个对象

// 定义mutations
// 如果要修改state，需要在mutations的方法修改
mutations: {
  addNum (state, obj) {
    state.count += obj.num
  }
}

// 提交mutations
store.commit('addNum', {num: 5})

vuex配合vue使用

• 定义store

// 1. 创建store
const store = new Vuex.Store({
  state: {
    count: 10
  }
})

• 定义vue实例

// 2. 创建vue实例
const vm = new Vue({
  el: '#app',
  // 3. 将store与vue实例关联
  store
})

• 关联store与vue实例

// 3. 将store与vue实例关联
store：store

• 在vue实例中使用store的数据

<div id="app">
  <!-- 4. 使用数据 -->
<h1>直接使用vuex中的数据{{$store.state.count}}</h1>
</div>

• 点击按钮，修改store中的数据

<div id="app">
  <!-- 4. 使用数据 -->
  <h1>直接使用vuex中的数据{{$store.state.count}}</h1>
  <button @click="add">修改数据</button>
</div>

<script>
// 1. 创建store
  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      addCount (state) {
        state.count++
      }
    }
  })
  
  // 2. 创建vue实例
  const vm = new Vue({
    el: '#app',
    // 3. 将store与vue实例关联
    store,
    methods: {
      add () {
        this.$store.commit('addCount')
      }
    }
  })
</script>

• devtools中查看vuex

TodoMVC

介绍

TodoMVC

结构搭建

• 静态页面

组件划分

• 新建三个组件

Header.vue
Main.vue
Footer.vue

为了演示组件之间的通讯

项目中使用vuex

• 安装

npm i vuex

• 新建store/index.js，类似于router/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// state用于存储数据
const state = {

}

export default new Vuex.Store({
  state
})

• 在main.js中导入

import store from './store'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store
})