vuex 使用说明

一、Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、Vuex 使用场景

涉及非父子组件之间跨组件共享数据、同一个数据在不同页面；控制某个属性，且多个页面都能修改这个数据；构建一个中大型单页应用。

注意： 由于vuex中的state存放的数据在页面刷新时会丢失，vuex只能用于单页应用中不同组件的数据流通。

三、Vuex 核心概念

• store：类似容器，包含应用的大部分状态

• State：包含所有应用级别状态的对象

• Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed

• Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions

• Actions：包含异步操作、提交mutations改变状态

• Modules：将store分割成不同的模块

四、引入 Vuex

1、安装vuex

npm install vuex --save
or
yarn vuex

2、新建一个store文件夹（这个不是必须的），并在文件夹下新建index.js文件，文件中引入我们的vue和vuex

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

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

3、在main.js 中引入新建的store

import store from './store/'

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

五、页面使用

1.读取store里的值：

this.$store.state.字段名 
如果有 moudle 的话，假设叫 user ,那么取值又要变了，加上 module 名

this.$store.state.user.字段名 

2.发起操作请求:

this.$store.dispatch('action中的方法名' , '参数') ;

参数你可以随便传json

3.getters的用法

this.$store.getters.filterDoned 
filterDoned 是在 todo 里写的一个 getters 方法