Vuex中有5个内容需要学习：
- state： 统⼀定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
- mutations ： 使⽤它来修改数据(类似于methods)
- getters： 类似于computed(计算属性，对现有的状态进⾏计算得到新的数据-------派⽣ )
- actions： 发起异步请求
- modules： 模块拆分
其中最为重要的内容是state和mutations
先创建vue
创建的时候选择这五个
有一步选择less 其他都是回车键就好了
那么如何配置呢 ?
新建一个store文件件在str下 , 然后新建一个index.js
import Vue from 'vue'
// 导入之前记得下载
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store然后在main.js中
// 省略其他
// 1. 导⼊store
import store from './store'
new Vue({
// 省略其他...
store // 2. 注⼊Vue实例
})
// 最后使用就好了 this.$store.state记得把.eslintrc.js文件下的第八排注释掉 , 不然很容易一排红
Vuex-state定义公共数据并在组件中使用
state是用来保存公共数据的
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
uname:'烽火戏诸侯' // 这里定义了一个uname
}
})
export default store
// state格式
// new Vuex.store({
// state: {
// 属性名： 属性值
// }
// })// App.vue
<template>
<div>
<p>{
{this.$store.state.uname}}</p>
</div>
</template>
// 在组件中，通过 this.$store.state.属性名 来访问。
// 在模板中，则可以省略 this ⽽直接写成： {
{$store.state.属性名}}
Vuex-⽤mutations修改公共数据
mutations格式
new Vue.store({
// 省略其他...
mutations： {
// 每⼀项都是⼀个函数，可以声明两个形参
mutation名1：
function (state[, 载荷]) {
},
mutation名2：
function (state[, 载荷]) {
},
}
})
使用格式 this.$store.commit('mutation名', 实参，给第⼆个参数)
第⼀个参数是必须的，表示当前的state。在使⽤时不需要传⼊
第⼆个参数是可选的，表示载荷，是可选的。在使⽤时要传⼊的数据
如果希望传递复杂的数据，第⼆个参数可以是对象
this.$store.commit('setUrl', { url, host} )
下面是源码 , 可以尝试添加修改数据
// App.vue
<template>
<div>
<p>{
{this.$store.state.uname}}</p>
<img :src="this.$store.state.url" alt="">
<button @click="btn">点击切换照片</button>
</div>
</template>
<script>
export default {
methods: {
btn () {
this.$store.commit('change', { newUrl: 'https://www.runoob.com/wp-content/uploads/2016/02/react.png', host: '第二个参数' })
}
}
}
</script>
<style>
img{
width: 100px;
height: 100px;
}
</style>// store/index.js
import Vue from 'vue'
// 导入之前记得下载
import Vuex from 'vuex'
Vue.use(Vuex)
// 向Vue实例注⼊store
const store = new Vuex.Store({
state: {
uname: '烽火戏诸侯',
url: 'https://vuejs.org/images/logo.svg'
},
mutations: {
change(state, {
newUrl,
host
}) {
state.url = newUrl
console.log(host)
}
}
})
export default store
Vuex-⽤getters的派⽣状态
定义格式
new Vuex.store({
// 省略其他...
getters: {
// state 就是定义的公共数据state
getter的名字1: function(state) {
return 要返回的值
}
}
})
使用格式
在组件中通过： $store.getters.getter的名字 来访问
// App.vue
<template>
<div>
总价{
{$store.getters.sum}}
</div>
</template>
// store/index.js
import Vue from 'vue'
// 导入之前记得下载
import Vuex from 'vuex'
Vue.use(Vuex)
// 向Vue实例注⼊store
const store = new Vuex.Store({
state: {
books: [{
"price": 100,
},
{
"price": 44,
},
{
"price": 40,
}
]
},
getters: {
sum(state) {
return state.books.reduce((sum, item) => sum + item.price, 0)
}
},
})
export default storeVuex⽤actions发异步请求
new Vuex.store({
// 省略其他...
actions: {
// context对象会⾃动传⼊，它与store实例具有相同的⽅法和属性
action的名字: function(context, 载荷) {
// 1. 发异步请求, 请求数据
// 2. commit调⽤mutation来修改/保存数据
// context.commit('mutation名', 载荷)
}
}
})
调⽤格式
在组件中通过 this.$store.dispatch('actions的名字', 参数) 来调⽤actionVuex-⽤modules来拆分复杂业务
export default new Vuex.Store({
// state: 用来保存所有的公共数据
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
模块名1： {
// namespaced为true，则在使用mutations时，就必须要加上模块名
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}，
模块名2： {
// namespaced不写，默认为false，则在使用mutations时，不需要加模块名
state: {},
getters: {},
mutations: {},
actions: {},
modules: {}
}
}
})访问模块中的数据，要加上模块名
获取数据项： {
{$store.state.模块名.数据项名}}
获取getters： {
{$store.getters['模块名/getters名']}}
访问模块中的mutations/actions:
如果namespaced为true，则需要额外去补充模块名
如果namespaced为false，则不需要额外补充模块名
$store.commit('mutations名') // namespaced为false
$store.commit('模块名/mutations名') // namespaced为true