vues部分基础知识

vuex的基本认识

概念

VueX是vue的状态管理模式，相当于react中的redux，主要是将保存的数据集中聚集起来，在进行一些固定的方法执行与调用，进行全局的改变

与其他全局变量的区别

Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据
在页面中无法直接进行更改，需要通过mutatios的commit进行一些修改

Vue安装

一、下载vuex依赖

npm install vuex --save	

二、引入vuex

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

三、新建一个store文件

const store = new Vuex.store( {
// state 中存放的是全局共享的数据
state： { count： 0 }
} )

四、将store挂载到vue实例

new Vue ( {
el: ' #app ',
render: h => h(app),
route r,
//创建的共享数据对象，挂载到vue实例中
store
//所有的组件就可以直接从store获取全局的数据

vuex的配置使用

导出引入：
import vuex from ‘vuex’
Vue.use(Vuex)

const store = new Vuex.Store({
state: {
count: 0
}
// state就相当于组件里面的data，里面可以存放数据
// state 里面的值在别的组件里面是不可以直接更改的
})
export default store
// es6语法，导出store

我们在min.js里面导入
import store from ‘./store’
new Vue({
store,
render: h => h(App)
}).$mount(’#app’)

Vue的核心概念

State，Getters,Mutations,Actions,Modules

mapState 辅助函数

import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count,
    countAlias: 'count',
    countPlusLocalState (state) {
      return state.count   this.localCount
    }
  })
}

当计算属性的名称与state的子节点名称相同时，可以给mapState传一个字符串数组

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

对象展开运算符：

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

Getters

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

mapState 辅助函数

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
    ])
  }
}

Mutation 必须是同步函数

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count  
    })
  }
}