从零开始学习使用 vuex
本文是建立在，对vuex理论有一定理解的基础上写的。
因为官方文档的写法是 针对 有一定的vue开发经验 和 JavaScript 有一定理解的开发者看的，对于小白级别的我来说，理解起来有一定困难。所以，唯一想我一向的小白想尽快上手vuex....
安装
直接下载 CDN 安装
CDN 链接地址：https://unpkg.com/vuex
指定到固定版本：https://unpkg.com/vuex@2.0.0
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
npm 方式安装 （推荐！简单快捷，便于管理）
npm install -save vuex
yar
yarn add vuex
自己构建
git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build
导入vue工程中使用
- main.js 入口文件
按照如下方式导入，工程就可以使用vuex的环境了
// 导入vuex头文件
import Vuex from 'vuex'
// 这里表示全局导入vuex
Vue.use(Vuex)
// 这里是我自定义的store文件 导出store对象
import store from '@/study/vuexStudy/store/store.js'
入口组件<App/>中，绑定store
new Vue({
el: '#app',
template: '<App/>',
components: { App },
store
})
到这里 算是万里长征走了第一步。
创建Store对象
store 的结构:
export const store = new Vuex.Store({
// ------state:状态值存储,这里可以存储n个状态的值
state: {count: '1'},
// ------getter:store中定义的getters可以认为是store的计算属性
// getters接收state作为其第一个参数
getters: {
done (state) {
return state.count + 5
}
},
// ------mutations:状态值的改变，操作状态值
// $store.commit(mutationsName, params)是更改状态值的唯一方法
mutations: {
increment (state) {
// 变更状态
state.count++
}
},
// ------actions:可以认为是包装了mutations的function 需要用 dispatch(actionName) 的方式去派发
actions: {
add (context) {
context.commit('increment')
},
addAsync (context) {
// 延时1秒
setTimeout(() => {
context.commit('increment')
}, 1000)
}
},
// store可以合并几个子store，以此来进行项目的模块化
modules: {
a: moduleA,
b: moduleB
}
})
编辑定义store实体对象：
- store.js文件中
这里为了便于抽离 我们外部声明城对象实体后嵌入绑定到store
-
创建一个store对象
export default const store = new Vuex.Store({ state,//绑定之前创建的state对象到store中 mutations, getters, actions, modules }) -
定义一个状态对象
state（实体）const state = { count: 0, state1: 1, state2: 2, state3: 3 } -
定义getters对象
const getters = { done (state) { return state.count + 5 }, getState1: function (state) { return state.state3 }, // ES6简写 getState2: state => state.state2 } -
.vue 文件中直接获取state值
首先导入辅助函数：
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'- 第一种方式：绑定到组件属性中，直接获取 （一般不用这个，绑定到computed中是最合适的）
$store.state.count并使用
export default { data() { return { testCount: this.$store.state.count } } } - 第一种方式：绑定到组件属性中，直接获取 （一般不用这个，绑定到computed中是最合适的）
* 第二种方式： 绑定到计算属性中（适合对store中的原始状态值进行一定处理的情况）
```JavaScript
export default {
data() {
return {
testCount: this.$store.state.count
}
},
computed:{
testComputedCount1: function () {
return this.$store.state.count + 22
}
}
}
```
* 第三种方式：mapState辅助函数绑定状态state值到组件计算属性中
```JavaScript
export default {
data() {
return {
testCount: this.$store.state.count
}
},
computed:{
testComputedCount1: function () {
return this.$store.state.count + 22
},
...mapState({
count: state => state.count,
mapState1: state => state.state1,
mapState2: state => state.state2
}),
}
}
```
* 第四种方式：使用store中绑定的getters进行获取
```JavaScript
export default {
data() {
return {
testCount: this.$store.state.count
}
},
computed:{
testComputedCount1: function () {
return this.$store.state.count + 22
},
...mapState({
count: state => state.count,
mapState1: state => state.state1,
mapState2: state => state.state2
}),
testComputedGettersCount2: funtion () {
return this.$store.getters.done
}
}
}
```
* 第五种方式： 借助mapGetters辅助函数绑定getters到vue的计算属性中
```JavaScript
export default {
data() {
return {
testCount: this.$store.state.count
}
},
computed:{
testComputedCount1: function () {
return this.$store.state.count + 22
},
...mapState({
count: state => state.count,
mapState1: state => state.state1,
mapState2: state => state.state2
}),
testComputedGettersCount2: funtion () {
return this.$store.getters.done
},
//直接绑定方法数组的方式
...mapGetters([
'getState1',
'getState2',
'getState3'
]),
//重命名对象绑定方式
...mapGetters({
mapGetterState1: 'getState1',
mapGetterState3: 'getState3'
}),
}
}
```
-
触发动作行为改变状态值
方式一：$store.commit('mutationsName')
方式二：$store.dispatch('actionsName')
store.js文件中：
- 初始化 mutations 和 actions (相当于是methods)
const mutations = { increment (state) { // 变更状态 state.count = state.count * 5 } }import {action4} from '@/path/actions.js' const actions = { // 同步方法 add: function (context) { context.commit('increment') }, // 延时操作 用于网络请求啊啥的 addAsync (context) { // 延时1秒 setTimeout(() => { context.commit('increment') }, 1000) }, // 简写方式 action2 (context) { context.commit('increment') }, // 抽离到单独文件中，在导进封装好的变量来直接使用即可（导进来的目的是为了接收第一个参数：state），不绑定到store，需要手动传入store对象 action4: action4, }
-
绑定action 和 mutations 到 methods，然后 调用就行了
export default { methods: { // 数组形式直接载入 ...mapActions([ 'add' ]), // 重命名形式 ...mapActions({ add: 'add', addAsync: 'addAsync', action4: 'action4' }), // 同上 ...mapMutations([ 'increment' ]), ...mapMutations({ incrementMutation: 'increment' }) } }
网友评论