vuex 状态管理
最后更新于：2022-04-02 03:32:26
[TOC]
## 安装
```
npm i vuex
```
## 目录结构
## 核心概念
### Getter - 以`state`数据为基准,创建新的数据
```
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)
}
}
})
//访问
this.$store.getters.doneTodosCount
```
### Mutation - store 中的状态的唯一方法
```
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state, n) {
state.count += n
}
})
//调用
store.commit('increment', 10)
```
### actions
Action 可以包含任意异步操作。
Action 提交的是 mutation
## 简单调用
```
const Counter = {
template: `
';
{{ count }}
`,
computed: {
count () {
return this.$store.state.count
}
}
}
```
## 把state中的值放到计算属性中
在 vue 中监听 vuex 值的变化
如:
`store/index.js`
```
...
state: {
forcedLogin: false,
hasLogin: false,
userName: ""
},
...
```
在 `.vue`中
```
import {
mapState
} from 'vuex'
export default {
computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
}
```
## vue中监听 vuex 属性的变化
```
'$store.state.currentGlobal':function () {
todo(this.$store.state.currentGlobal);
}
```