vue
此文章没有官网那么详细，仅仅给刚要入坑vuex的读者的一些帮助，大神请绕道，有帮助的请给个赞~~
vuex是专为vue.js提供的状态管理模式。使用是非常简单的，记录一下具体使用步骤。
简述作用
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
说得通俗点就是，在vue组件中，多个组件要用到同一个数据源，并且通过这个数据源渲染视图，并且数据源发生变化了，组件都要响应式变化。而维护这个数据的方案就是vuex.
安装
CDN方式
<script src="https://unpkg.com/vuex"></script>
引入vue.js后直接引入，即可自动安装
npm方式
npm install vuex --save
yarm方式
yarn add vuex
如果是在模块化的打包系统的话，必须显式安装vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
官网 ：状态管理模式的应用一般包含几个部分
state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
state
state就是存储数据源的容器，可以简单这里理解，好比在vue组件中的那个data一样，只不过这是在vuex存储数据的容器。
首先用new Vuex.Store()创建vuex实例
const store = new Vuex.Store({
state:{
count : 0
}
})
如果在模块化打包系统(vue-cli)中是,新建一个store.js
import vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new Vue.Store({
state:{ // 存储数据的容器
count : 0
}
})
export default store
数据已经有了，怎么在具体组件上面显示数据。一般来说，我们是将store挂在根组件上。这样所有的组件都能拿到store的数据。
假设是在模块化打包系统中(vue-cli),在main.js
import Vue from 'vue'
import App from './App'
import vuex from 'vuex'
import store from '@/store/store'
Vue.use(vuex)
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
此时store已经挂在vue的根组件上面了，所以我们在根组件上面输出根组件就可以看到store
在App.vue中
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
data(){
},
created(){
// 输出根组件
console.log(this)
}
}
</script>
vuex
可以看到根组件的store.state.count就是我们在store.js定义在state的count。
我们在组件上访问count就是this.$store.count,不过要注意的是要想实时响应count的值的话，就要写在计算属性上面
<div id="app">
{{count}}
</div>
computed:{
count(){
return this.$store.state.count
}
}
getter
有时候我们需要从 store 中的 state 中派生出一些状态，比如我不直接读取state里面值，我想对这里面的值进行一些操作在返回就可以用到getter
import vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new Vue.Store({
state:{ // 存储数据的容器
count : 0,
list:[
{id:0,name :'zhangsan',status:true},
{id:1,name :'lisi'status:false},
...
]
},
getters:{
getLists(state) {
return state.list.filter(item => item.status)
}
}
})
export default store
上面的例子，我需要对list进行一些操作在输出值，不是直接拿到list的值，就可以用到getter了
Getter 接受 state 作为其第一个参数：
怎么在组件中访问getter?
通过属性访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
store.getters.doneTodos // [{ id: 1, name: 'zhangsan', status: true },...]
在上面例子就是
<div id="app">
{{count}}
</div>
computed:{
count(){
return this.$store.state.count
},
getList(){
return this.$store.getters.getLists
}
}
通过方法访问
可以通过让 getter 返回一个函数，来实现给 getter 传参。这种方式对列表筛选的需求特别有用
getters: {
getListById: (function (state) {
return function (id) {
return state.list.find(function (item) {
return item.id === id;
});
};
});
}
上面例子中
this.$store.getters.getListById(0) // [{id:0,name :'zhangsan',status:true}]
注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
其他更多getter东西请参考官网文档，这里不深究~
mutation
既然我们已经有了读了，那接下来是写的操作了，官网上说
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
注意这里多了两个概念 mutation和commit 先不要混淆
接上面的store.js,我们在vuex的实例store里面新增个mutation对象，这个对象存储这我们想要对state对象里数据源的各种操作,而这些具体的操作的函数就叫 commit
import vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new Vue.Store({
state:{ // 存储数据的容器
count : 0
},
mutations:{
increase(state,n){
state.count += n
}
}
})
export default store
在mutation里面定义的commit函数，函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。也可以传入额外参数。
例子中的n就是额外参数。
那我们在具体组件中，怎么出发这个mutation里面的修改状态的函数。
我们回到app.vue,比如我们像实现一个小需求，在input输入框中输入数字，然后把这个数字和count相加。
<template>
<div id="app">
<div>{{counter}}</div>
<input type="text" v-model="number">
<button @click="increment">相加</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
number:''
},
methods:{
increment(){
this.$store.commit('increment',parseInt(this.number))
}
}
}
</script>
首先我们要知道，在vuex中不能直接的改变state的状态，要通过显式的提交一个commit去出发mutation里面的改变状态的函数。
在组件中，我们用store.commit('increment')去出发mutation的函数，而上面使用this.$store.commit('定义在mutation的函数名'，'额外参数')触发。
当然我们传递的额外参数应该也可以是个对象更加贴近具体需求
mutations:{
increase(state,payload){
state.count += payload.n
}
}
相应的触发写法
this.$store.commit('increment', {
n: 10
})
还可以用另一种直接包含type属性的对象提交mutation
this.$store.commit({
type: 'increment',
amount: 10
})
当然对于mutation的额外注意事项和东西可以查看官网文档
action
现在又多了个action的概念了，Action和mutation类似，按照官网说的：不同之处就是
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
import vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new Vue.Store({
state:{ // 存储数据的容器
count : 0
},
mutations:{
increase(state,n){
state.count += n
}
},
actions:{
increase (context) {
context.commit('increase')
}
}
})
export default store
注意写在store.js的mutation和action都是带有s的复数形式
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
这里为什么说context对象是与store实例具有相同方法和属性的对象，先不深究，后面会讲到。
触发action
Action 通过 store.dispatch 方法触发
store.dispatch('increase')
写在上面代码就是
this.$store.dispatch('increase')
其实很多人应该会在想，既然又了mutation了，那action不就多此一举了吗，关键还真不是，因为mutation是必须同步执行的，不能保护又异步的代码，而action不受限制，我们可以在action里面执行异步操作
参考官网的例子
actions: {
incrementAsync (context) {
setTimeout(() => {
context.commit('increment')
}, 1000)
}
}
和mutation一样，同样支持荷载形式触发对象方式触发
store.dispatch('incrementAsync', {
amount: 10
})
store.dispatch({
type: 'incrementAsync',
amount: 10
})
具体其他注意事项，请参考官网文档
module
module的出现是为了解决，当应用变得非常复杂时候，store对象会变得异常臃肿，与是vuex运行我们对store对象分模块管理。
每个模块都有自己的state、mutation、action、getter和嵌套的module。
参照官网例子
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
到此就是简单的入门知识了，希望读者对vuex能有个简单的概念，再去看官网的文档就非常容易理解了~
欢迎访问我的个人网站zhengyepan
网友评论